Com afegir cerca a la teva app: des de filtres simples fins a cerca de text complet
Per afegir cerca a la teva app, comença per la cosa més simple que funcioni: un quadre de cerca que crida una ruta de servidor, la qual filtra les files de la base de dades comparant la consulta amb unes quantes columnes, més filtres per a coses com la categoria o el preu. Quan això no sigui prou bo —necessites ordenació per rellevància, arrels de paraules o molts registres—, canvia a la cerca de text complet de la teva base de dades, i només passa a un motor de cerca allotjat si necessites molt bona tolerància als errors tipogràfics o resultats instantanis sobre dades molt grans. Triï el que triïs, la cerca ha de respectar els permisos: els usuaris mai no han de trobar registres que no tenen permís per veure.
Què vol dir «cerca» per a la teva app
La cerca abasta diverses coses diferents, i la majoria d'apps necessiten més d'una:
- Cerca per paraules clau: un quadre de text —«troba anuncis que mencionin 'jardí'».
- Filtres: opcions estructurades —categoria, ciutat, rang de preu, data, estat.
- Ordenació: més recents, més barats, més rellevants.
- Autocompletat: suggeriments mentre s'escriu.
- Tolerància als errors tipogràfics: «restuarant» encara troba «restaurant».
Per a un directori, un tauler d'ofertes de feina o una botiga, els filtres sovint importen més que el quadre de text. Decideix quines d'aquestes necessites de veritat abans de triar una eina.
Les opcions
| Enfocament | Com funciona | Ideal per a | Límits |
|---|---|---|---|
| Filtrar al navegador | Carregar la llista i filtrar-la amb JavaScript | Llistes públiques petites (unes quantes centenars d'elements) | Envia totes les dades a cada visitant; lent amb llistes grans |
| Coincidència de patrons a la base de dades | Consulta al servidor tipus «el nom conté el text», sense distingir majúscules | Apps petites o mitjanes, eines d'administració | Sense ordenació per rellevància; pot anar lent en taules grans; sense arrels de paraules |
| Cerca de text complet a la base de dades | Postgres indexa les paraules i ordena les coincidències | La majoria d'apps amb molt contingut | Feble amb errors tipogràfics, tret que hi afegeixis coincidència aproximada |
| Coincidència aproximada (trigrames) | Postgres compara seqüències de caràcters per similitud | Noms, camps curts, tolerància als errors tipogràfics | Necessita una extensió i un índex; l'ajust requereix cura |
| Motor de cerca allotjat | Un servei separat indexa les teves dades (Algolia, Meilisearch, Typesense, Elasticsearch i altres) | Catàlegs grans, cerca instantània, molta tolerància als errors tipogràfics | Un altre servei per mantenir sincronitzat, pagar-lo i protegir-lo |
Si les teves dades ja són a Postgres, la seva cerca de text complet integrada és un bon terme mig. Parteix el text en paraules, les redueix a arrels (perquè «running» coincideixi amb «run»), ignora les paraules comunes i pot ordenar els resultats segons com coincideixin. Amb l'índex adequat es manté ràpida en taules grans.
Indicacions d'exemple
Un començament senzill:
Afegeix un quadre de cerca i filtres a la pàgina d'anuncis. La cerca ha de comparar la consulta amb el títol i la descripció, sense distingir majúscules. Filtres: categoria (desplegable), ciutat (desplegable) i preu màxim. Fes la cerca al servidor amb una ruta d'API paginada, 20 resultats per pàgina. Mantén la cerca i els filtres a la URL perquè els resultats es puguin compartir i el botó de tornar funcioni. Mostra un estat buit amigable quan no hi hagi coincidències.
Per passar a la cerca de text complet:
Canvia la cerca d'anuncis a la cerca de text complet de Postgres sobre el títol (amb més pes) i la descripció. Afegeix l'índex adequat, ordena els resultats per rellevància i mantén els filtres i la paginació existents. No canviïs cap dada existent.
Per afegir tolerància als errors tipogràfics en els noms:
Afegeix coincidència aproximada sobre el nom de l'empresa perquè els petits errors tipogràfics encara trobin resultats. Fes servir la similitud de trigrames si està disponible, amb un índex, i torna a la cerca actual si no ho està.
Pas a pas
- Enumera què busca la gent. Quins camps (títol, descripció, etiquetes, nom)? Quins filtres? Pregunta a alguns usuaris reals si pots.
- Comença al servidor. Afegeix una ruta d'API que rebi la consulta i els filtres, i retorni una pàgina de resultats. No carreguis tot al navegador.
- Aplica els permisos a la consulta. Si els usuaris només veuen els seus propis registres, o només els publicats, aquesta condició pertany a la mateixa consulta que la cerca.
- Afegeix paginació des del primer dia —números de pàgina o «carrega'n més».
- Posa l'estat de la cerca a la URL (per exemple
?q=garden&city=leeds). Els enllaços compartibles, el botó de tornar i els motors de cerca poden rastrejar les pàgines filtrades si les vols indexades. - Aplica un retard a la cerca mentre s'escriu. Espera uns quants cents de mil·lisegons després d'acabar d'escriure abans de fer la consulta, perquè no n'enviïs una per cada tecla.
- Afegeix índexs quan sàpigues per quines columnes filtres i cerques.
- Millora a cerca de text complet, després coincidència aproximada, i després un motor allotjat —només quan el pas més simple falli amb usuaris reals.
- Prova amb dades semblants a les reals: centenars o milers de files, caràcters estranys, consultes buides, consultes molt llargues, altres idiomes si els admets.
Errors habituals
- Carregar tota la taula al navegador. Està bé per a 50 elements, és dolorós per a 50.000, i exposa cada registre —inclosos els que l'usuari no hauria de veure.
- Una cerca que ignora els permisos. La cerca és una fuita habitual: un registre privat o un esborrany apareix perquè la consulta de cerca s'ha oblidat de la condició «només els meus» o «només els publicats».
- Construir SQL amb l'entrada directa de l'usuari. Usa sempre consultes parametritzades. Un constructor d'IA normalment ho fa, però comprova si veus cadenes enganxades.
- Sense estat buit. «Sense resultats» amb un suggeriment (esborra els filtres, revisa l'ortografia) evita que la gent se'n vagi.
- Sense índexs. La cerca sembla bé amb dades de prova i s'alenteix a mesura que creixen les dades reals.
- Anar directament a un servei de cerca. Després has de mantenir una segona còpia de les dades sincronitzada, gestionar les eliminacions i protegir un altre conjunt de claus —sovint sense cap benefici visible.
- Oblidar el mòbil. Els filtres han de cabre en un telèfon; un calaix de filtres o un panell plegable normalment funciona millor que una barra lateral.
Llista de comprovació
- Saps quins camps es cerquen i quins filtres existeixen
- La cerca s'executa al servidor i retorna resultats paginats
- La consulta aplica els mateixos permisos que la resta de l'app
- L'entrada de l'usuari es passa com a paràmetres, mai enganxada dins de SQL
- L'estat de la cerca viu a la URL
- L'escriptura té retard
- Les columnes cercades i filtrades estan indexades
- Els estats buit, sense resultats i d'error són clars
- Provat amb volums de dades realistes i entrades desordenades
Afegir cerca amb Mythex
A una app construïda a Mythex, les dades normalment viuen a la base de dades Postgres del projecte, així que pots començar amb les indicacions de dalt: primer la coincidència de patrons, després la cerca de text complet de Postgres quan necessitis ordenació per rellevància. Si vols un motor de cerca allotjat, porta el teu propi compte i la teva clau, guarda-la com a secret del projecte i demana a l'agent que indexi i consulti des del servidor, tal com es descriu a Integra qualsevol API.
La cerca és el nucli de moltes apps: consulta com construir un lloc web de directori, com construir un tauler d'ofertes de feina i com construir un mercat per veure com encaixa amb la resta del producte.
Preguntes
Quina és la manera més senzilla d'afegir cerca a una app?
Si les teves dades són a una base de dades, una ruta de servidor que filtri les files amb una coincidència sense distingir majúscules en unes quantes columnes és el començament més senzill. Per a una llista petita que ja està carregada al navegador, filtrar al navegador és encara més senzill.
Necessito Algolia o Elasticsearch per fer cerca?
Normalment no, al principi. La cerca de text complet de Postgres gestiona bé la coincidència de paraules, l'ordenació de resultats i des de milers fins a milions de files. Un motor de cerca allotjat val la pena quan necessites molt bona tolerància als errors tipogràfics, resultats instantanis mentre s'escriu sobre dades grans, o un ajust avançat de la rellevància.
Per què la meva cerca no troba resultats quan hi ha errors tipogràfics?
La coincidència bàsica i la cerca de text complet estàndard busquen les paraules tal com s'escriuen (o les seves arrels), així que una falta d'ortografia no troba res. Necessites una coincidència aproximada, com la similitud de trigrames a Postgres o un motor de cerca amb tolerància als errors tipogràfics.
La cerca s'ha d'executar al navegador o al servidor?
Al servidor per a qualsevol cosa més enllà d'una llista pública petita. La cerca al servidor escala, respecta els permisos i no envia tot el teu conjunt de dades a cada visitant.