Realizar busqueda Instantanea JSON con Javascript

Question

Estoy desarrollando una aplicación web donde se pueden realizar la búsqueda de usuarios mediante AJAX y PHP, sin embargo el tiempo de respuesta en ocasiones es muy largo.

Para ahorrar tiempo a la hora de la búsqueda estoy cargando un objeto JSON el cual trae todos los usuarios en la base de datos similar a esto

[
  {
    "nombre": "Carlos Fernando",
    "datos":{
      "Puesto": "programador",
      "Id": 95
    }
  },
  {
    "nombre": "Luis Fernando",
    "datos":{
      "Puesto": "programador",
      "Id": 98
    }
  },
  {
    "nombre": "Carlos Hernandez",
    "datos":{
      "Puesto": "programador",
      "Id": 100
    }
  }
  
 ]

Y quiero hacer que cuando el usuario escriba el nombre en un input con el evento KeyUp realice la búsqueda del contenido del input dentro del objeto JSON

Por ejemplo que al escribir Carlos aparezca Carlos Fernando y Carlos Hernandez o que al escribir Fernando aparezca Luis Fernando y Carlos Fernando

mi problema es que obviamente no me traerá ningún resultado por si solo, puesto que no existe ninguna coincidencia.

¿Alguna recomendación?

Que para que me de un resultado tengo que escribir el nombre completo y lo que quiero es que me traiga coincidencias, ¿Me explico? — Fernando Ferretiz, May 29 '19 at 17:10
¿Crees que ***Para ahorrar tiempo a la hora de la búsqueda estoy cargando un objeto JSON el cual trae todos los usuarios en la base de datos*** realmente sea algo eficiente? Para buscar coincidencias tienes formas de hacer la consulta, dependiendo del motor de base de datos que uses. Pero traer toda la información, para ***agilizar*** una búsqueda, no es lo prudente ni lo recomendado. Saludos — Mauricio Contreras, May 29 '19 at 17:13
Ademas, deberias agregar tu codigo de lo que has intentado para poder ayudarte. — alanfcm, May 29 '19 at 17:13
puedes usar el metodo [.filter()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter), por cierto un [Objeto no es un JSON](https://es.stackoverflow.com/questions/164943/cu%C3%A1l-es-la-diferencia-entre-json-y-un-objeto-en-javascript) — JackNavaRow, May 29 '19 at 17:16

score 2 · Accepted Answer · answered May 30 '19 at 08:00

En practica tienes que cargar el JSON y parsearlo etc... Pero supongo que esto ya lo tienes bien porque en tu pregunta dices que ya te trae los usuarios.

Este es un ejemplo donde he transformado tu json es un array para poder demostrar mi idea. Por favor lea los comentarios en el código

let json = [
  {
    nombre: "Carlos Fernando",
    datos: {
      Puesto: "programador",
      Id: 95
    }
  },
  {
    nombre: "Luis Fernando",
    datos: {
      Puesto: "programador",
      Id: 98
    }
  },
  {
    nombre: "Carlos Hernandez",
    datos: {
      Puesto: "programador",
      Id: 100
    }
  }
];


// el erray de los nombres seleccionados
let seleccionados = [];
// cada vez que el valor del elemento input cambia
buscador.addEventListener("input", () => {
  //vacia el array de los nombres seleccionados
  seleccionados.length = 0;
  //para más eficiencia crea un nuevo fragmento
  let fragment = document.createDocumentFragment();
  //recuoera el valor del input y guardalo en una variable
  let elValor = buscador.value;
  //si hay un valor
  if (elValor.length > 0) {
  // busca en el json si el nombre incluye (o empieza por) el valor
    json.forEach(j => {
      //if(j.nombre.startsWith(elValor))
      if (j.nombre.includes(elValor)) {
        // si lo incluye agregalo al array de los seleccionados
        seleccionados.push(j.nombre);
      }
    });
    //para cada elemento selccionado
    seleccionados.forEach(s => {
    //crea un nuevo elemento p
      let p = document.createElement("p");
      //cuyo innerHTML es el nombre seleccionado
      p.innerHTML = s;
      //y agregalo al fragmento
      fragment.appendChild(p);
    });
    //vacía el resultado 
    resultado.innerHTML = "";
    //agrega el fragmento al resultado
    resultado.appendChild(fragment);
  }
});

<div id="buscar">
<form>
    <input type="text" id="buscador" name="name" placeholder="busca" autocomplete="off" />
</form>
</div>
<div id="resultado"></div>

Realizar busqueda Instantanea JSON con Javascript

1 Answers1