I came across this code snippet for a table created with sveltestrap. I am struggling to figure out how to make the search case insensitive and would appreciate any help or guidance on how to do so. This is the code I have tested using Svelte REPL:
<script>
import { onMount } from 'svelte';
import { Card, CardBody, CardHeader, Input, Table, Column, Styles } from 'sveltestrap';
let search = undefined;
let users = [];
$: visibleUsers = search ?
users.filter(user => {
return user.name.first.match(`${search}.*`) || user.name.last.match(`${search}.*`)
}) : users;
onMount(async () => {
const resp = await fetch('https://randomuser.me/api?results=25&inc=id,name,email,')
const data = await resp.json();
users = data.results;
});
</script>
<style>
@import url('https://gthomas-appfolio.github.io/bootstrap-coastline/bootstrap-coastline.css');
</style>
<Card>
<CardHeader>
<Input type="search" bind:value={search} class="ms-auto w-auto" placeholder="Search" />
</CardHeader>
<CardBody>
<Table striped rows={visibleUsers} let:row={user}>
<Column header="uuid">
{user.id.value}
</Column>
<Column header="First">
{user.name.first}
</Column>
<Column header="Last">
{user.name.last}
</Column>
<Column header="Email">
{user.email}
</Column>
</Table>
</CardBody>
</Card>