2011-10-30 37 views
9

enteramente en JS, sin backend de servidor. Necesito permitir que el usuario busque y luego mostrar una lista de nombres coincidentes. Estoy usando jQuery UI AutoComplete pero necesito algunos JS para filtrar los resultados.¿Cómo usar JS/jQuery para buscar cadenas/coincidencias difusas?

Dada una matriz de nombres:

Bob Hope 
James Jones 
Steve Jobs 
Larry McBridge 

Dado un término de búsqueda como Bo

¿Cómo puedo obtener sólo Bob Hope para volver

Dado un término de búsqueda como b:

¿Cómo puedo obtener todo menos James Jones?

¿Alguna JS simple para comparar dos cadenas? Gracias

+0

Para el beneficio de futuros lectores, he implementado una biblioteca solo para esto: http: // g ithub.com/uohzxela/fuzzy-autocomplete – uohzxela

+0

@uohzxela - Para mi beneficio, vine aquí para ** evitar ** el uso de una biblioteca (tuve suficientes). Además, un vistazo rápido a sus visitas fue hecho para un caso de uso muy específico y es poco probable que ayude a muchos desarrolladores – vsync

Respuesta

7
var names = ["Bob Hope","James Jones","Steve Jobs","Larry McBridge"] 
var query = "bo" 
var results = $(names) 
     .map(function(i,v){ 
      if(v.toLowerCase().indexOf(query.toLowerCase())!=-1){return v} 
     }).get() 

// results is ["Bob Hope"] 
+0

Para probar una sola cadena if (stringToSearch.toLowerCase(). IndexOf (stringQuery.toLowerCase())! = -1) {alerta ("coincidencia"); } –

1

Tal vez te malentendí (dada la complejidad de la respuesta anterior), pero se me ocurrió this que usa jQuery. Cada vez que se presiona una tecla (cuando la entrada tiene foco), busca todos los elementos li en la página y determina si contienen el término de búsqueda.

Aquí está el código HTML:

<ul><li>Bob Hope</li> 
<li>James Jones</li> 
<li>Steve Jobs</li> 
<li>Larry McBridge</li></ul><br> 
Search: <input id="search" length="24" /> 

Y aquí es su jQuery:

$("#search").keyup(function(){ 
    $("li").hide(); 
    var term = $(this).val(); 
    $("li:contains('" + term + "')").show(); 
}); 
0

Usando la respuesta de Iván, pero con cambios ES6:

var names = ["Bob Hope","James Jones","Steve Jobs","Larry McBridge"]; 

function findIn(s, list){ 
    return list.filter((v) => v.toLowerCase().indexOf(s.toLowerCase()) != -1); 
} 


findIn('bo', names); 
Cuestiones relacionadas