JSFiddle - React, Tailwind, and code Playground

by pedromir

HTML

<form name='formu1' id='formu1'>
<label>Nombre: </label><input type="text" name="nombre" id="nombre">
<label>Apellido: </label><input type="text" name="apellido" id="apellido"><br /><br />
     <label>Ciudad: </label><select name="ciudad" id="ciudad">
            <option value="">Elija opción</option>
            <option value="madrid">Madrid (ES)</option>
            <option value="sevilla">Sevilla (ES)</option>
            <option value="toledo">Toledo (ES)</option>
        </select><br /><br />
      <label>Preferencias: </label><label><input name="Libros" type="checkbox" id="libros" value="libros" />Libros</label>
      <label><input name="Peliculas" type="checkbox" id="peliculas" value="peliculas" />Películas</label>      
      <label><input name="Deportes" type="checkbox" id="deportes" value="deportes" />Deportes</label><br /><br />
</form>
<input type="button" onclick="buscar();" name="procesar" value="procesar"><br />

JavaScript

datos = [
        {nombre:'Jose', ciudad:'tamuin', pais:'mexico', color:'rojo'},
      {nombre:'Albert', ciudad:'la chingada', pais:'españa', color:'amarillo'},
      {nombre:'Antonio', ciudad:'tzinzunzan', pais:'alemania', color:'blanco'},
      {nombre:'Manuel', ciudad:'tepic', pais:'mexico', color:'negro'},
      {nombre:'Margarita', ciudad:'cedral', pais:'españa', color:'azul'},
    ]
    
function busqueda(){
	
	datos = [
        {nombre:'Jose', ciudad:'tamuin', pais:'mexico', color:'rojo'},
      {nombre:'Albert', ciudad:'la chingada', pais:'españa', color:'amarillo'},
      {nombre:'Antonio', ciudad:'tzinzunzan', pais:'alemania', color:'blanco'},
      {nombre:'Manuel', ciudad:'tepic', pais:'mexico', color:'negro'},
      {nombre:'Margarita', ciudad:'cedral', pais:'españa', color:'azul'},
    ]

var txtNombre = document.getElementById("nombre").value;    

if(txtNombre.length){
    datos = datos.filter(function(item){
        return datos.nombre === txtNombre;
    });
}
alert(datos);
console.log(datos);
}