I found this example related to a table created with sveltestrap. the problem that I can not solve, is to make the search insensitive houses and do not know how to do code tested with 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>
This code is using regular expressions to do the matching:
users.filter(user => {
return user.name.first.match(`${search}.*`) || user.name.last.match(`${search}.*`)
}) : users;
Regular expressions can accept flags, one of which is "case insensitive" (the "i" flag). You can construct a regular expression dynamically by using the RegExp constructor; its second argument accepts flags.
So change the above code to something like this:
users.filter(user => {
const regex = new RegExp(`${search}.*`, 'i')
return user.name.first.match(regex) || user.name.last.match(regex)
}) : users;