Incremental filtering in JQuery

Question

Incremental filtering in JQuery

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have the following code in JQuery, a function to filter an array that I store in a global variable, it is a JSON that I ask for AJAX.

function filtrar(dato){
       var filtrado = content.filter(function (a) {
                return a.nombre == dato;
            });
       if (filtrado.length>0) {
        
      
        $("#resultado").empty(); 
            for (var i = 0; i < filtrado.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + filtrado[i].idproducto + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].marca + "</td>" +
                    "<td>" + filtrado[i].categoria + "</td>" +
                    "<td>" + filtrado[i].precio + "</td>" +
                    "</tr>";
                  
                $(newRow).appendTo("#resultado");                 
       }

} 
	
  
};

It works perfect, but it filters, that is, it erases the entire table and shows those that coincide strictly, that is, the entire product name in this case. How can I filter character by character if the name contains part of the searched string?

var content;
$(document).ready(function() {
listar();
var nombreBusqueda;

 $("#nombre").keyup(function() {
            
        nombreBusqueda=$("#nombre").val();
        filtrar(nombreBusqueda);
    }
);
});

Up there the code when I load the page and I type a search. I want to look in the array and not in the DOM because I plan to paginate in the future and I want to search over the total of records

json

asked by Caruso 02.07.2018 в 21:28

source

2 answers

How to get the hash value of a raw image? mouseenter hover

score 0 · Answer 1

To compare strings and make sure that one text is included in another you can use the method indexOf this returns the position since the word is found, but return -1

"Blue Whale".indexOf("Blue")    // returns 0
"Blue Whale".indexOf("Blute")   // returns -1
"Blue Whale".indexOf("Whale",0) // returns 5
"Blue Whale".indexOf("Whale",5) // returns 5
"Blue Whale".indexOf("",9)      // returns 9
"Blue Whale".indexOf("",10)     // returns 10
"Blue Whale".indexOf("",11)     // returns 10

The indexOf method is case sensitive. For example, the following expression returns -1:

"Ballena Azul".indexOf("azul")

To solve this you can pass everything to lowercase or uppercase during the search,

$textoCompleto = "Ballena Azul"; 
$textoABuscar = "aZUl";
$textoCompleto.toLowerCase().indexOf($textoABuscar.toLowerCase()); //returns 8

score 0 · Answer 2

simply iterate over the name within the array using IndexOf like the Samir Llorente approach.

function filtrar(dato){
        var filtrado=[];
        var existe;
    for(var i = 0; i < content.length; i++) {
    if (content[i].nombre.toLowerCase().indexOf(dato.toLowerCase())!=-1) {
        filtrado.push(content[i]);
          console.log("se encuentra objeto!.");
       
    }
}
     if (filtrado.length>0) {
        
      $("#resultado").empty();
        
            for (var i = 0; i < filtrado.length; i++) {
          
                var newRow =
                    "<tr>" +
                    "<td>" + filtrado[i].idproducto + "</td>" +
                    "<td>" + filtrado[i].nombre + "</td>" +
                    "<td>" + filtrado[i].marca + "</td>" +
                    "<td>" + filtrado[i].categoria + "</td>" +
                    "<td>" + filtrado[i].precio + "</td>" +
                    "</tr>";
                  
                $(newRow).appendTo("#resultado");                 
       }
 
	
  
}};