Tengo un bloque de código jquery en funcionamiento en el que tomo el valor de una entrada html y lo comparo con los valores json para encontrar una coincidencia.
Actualmente funciona si hay una coincidencia exacta, por lo que en el ejemplo a continuación, tendría que escribir 123 o 155 por completo para obtener un resultado, pero quiero llegar a donde escribir '1' mostraría ambos y similares (básicamente busque coincidencias sin que las cadenas estén completamente escritas o sean exactas), como un autocompletado estándar.
¿Qué estoy haciendo mal aquí?
var stores=[{ "id": "123", },{ "id": "155" } ]; function searchStores() { var foundStores = []; var value = document.getElementById('ss').value; console.log(value); if(value){ stores.forEach(function (store,index) { var id = store.id; console.log(id); if(id == value){ foundStores.push(store); }; }); }else{ foundStores = stores; } console.log(foundStores); }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="ss" type="text" name="locationSearch" placeholder="search" style="border-radius:18px; padding:4px; width: 80%;" />Tu linea
if (id == value) { hace una comparación de igualdad, por lo que los valores deben coincidir exactamente. Como su id es una cadena en lugar de un número, puede usar la cadena indexOf()
if (id.indexOf(value) >= 0) {Las versiones más nuevas (actuales) de los navegadores también podrían usar cadenas de inclusión ()
if (id.includes(value)) {Fragmento actualizado (con un controlador de eventos para verlo funcionar):
var stores = [{ "id": "123", }, { "id": "155" }]; function searchStores() { var foundStores = []; var value = document.getElementById('ss').value; //console.log(value); if (value) { stores.forEach(function(store, index) { var id = store.id; //console.log(id, store, index); if (id.indexOf(value) >= 0) { foundStores.push(store); }; }); } else { foundStores = stores; } console.log(foundStores); }; $("#ss").on("input", function() { searchStores(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="ss" type="text" name="locationSearch" placeholder="search" style="border-radius:18px; padding:4px; width: 80%;" /> <div id='result'></div>Básicamente, lo que está tratando de lograr es obtener su matriz de stores y filtrarla por el texto que escribe. Para ese propósito, le sugiero que use el método de filter de matriz que itera toda la matriz y devuelve una nueva matriz que cumple alguna condición; en su caso, la id contiene el texto que está escribiendo
var stores = [{ "id": "123", }, { "id": "155" }]; function searchStores(event) { var text = event.target.value; var resultStores = stores.filter(store => store.id.includes(text)); console.log(resultStores) }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input oninput="searchStores(event)" type="text" name="locationSearch" placeholder="search" style="border-radius:18px; padding:4px; width: 80%;"/>