Encontré este ejemplo relacionado con una tabla creada con sveltestrap. el problema que no puedo solucionar, es hacer la busqueda de casas insensibles y no se como hacer codigo probado con 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>Este código usa expresiones regulares para hacer la coincidencia:
users.filter(user => { return user.name.first.match(`${search}.*`) || user.name.last.match(`${search}.*`) }) : users; Las expresiones regulares pueden aceptar indicadores, uno de los cuales "no distingue entre mayúsculas y minúsculas" (el indicador "i"). Puede construir una expresión regular dinámicamente usando el constructor RegExp ; su segundo argumento acepta banderas.
Así que cambie el código anterior a algo como esto:
users.filter(user => { const regex = new RegExp(`${search}.*`, 'i') return user.name.first.match(regex) || user.name.last.match(regex) }) : users;