Twitter Bootstrap Filtro Di Riga / Casella Di Ricerca

Sto avendo problemi a trovare un tutorial su come creare una semplice query di ricerca, o filtro di riga, per Twitter Bootstrap. Ho provato molti, non so se sto facendo qualcosa di sbagliato, o i plugin non compatibile con Bootstrap. Si prega di aiuto, se potete.

Ho provato:

$(document).ready(function() {
 //Declare the custom selector 'containsIgnoreCase'.
      $.expr[':'].containsIgnoreCase = function(n,i,m){
          return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
      };

      $("#search").keyup(function(){

          $("#tabela").find("tr").hide();
          var data = this.value.split(" ");
          var jo = $("#tabela").find("tr");
          $.each(data, function(i, v){

               //Use the new containsIgnoreCase function instead
               jo = jo.filter("*:containsIgnoreCase('"+v+"')");
          });

          jo.show();

      }).focus(function(){
          this.value="";
          $(this).css({"color":"black"});
          $(this).unbind('focus');
      }).css({"color":"#C0C0C0"});
});

Nulla con questo… Forse mi manca qualche “id” sul mio tavolo o la casella di ricerca, sono nuovo con questo.

  • A cura ottenere una risposta

 

2 Replies
  1. 46

    Ecco quello che io uso:

    $('input.filter').live('keyup', function() {
        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').hide();
            $('.searchable tr').filter(function() {
                return rex.test($(this).text());
            }).show();
        });

    Per utilizzarlo, è sufficiente creare una tabella, con una tbody con la classe “ricercabile” e quindi un ingresso con classe “filtro” da qualche parte sulla tua pagina (io preferisco metterli in un Bootstrap Comparsa dietro un’icona di ricerca).

    • Sir. Non so se sei ancora in giro, ma il codice di cui sopra mi ha salvato ore di frustrazione. Grazie!!
    • Super codice che permette di risparmiare tempo.
    • Bel frammento. Molto utile!
    • Con jQuery > 1.7 .live() dovrebbe essere .on().
    • Ho bisogno di mostrare Aggiungere di Nuovo in lista, se non ho la voce can u help me ??
    • OMG!!! Non avete idea di quanto questo mi ha salvato, sono stato alla ricerca di una soluzione di questo per giorni e nessuno mi poteva aiutare. Grazie grazie Grazie
    • Potrei mettere questo codice in una cornice e appendere sul mio muro…

  2. 21

    Questo è l’esempio vivo di soluzione fornita da Filipp Lepalaan. Molte grazie per questo piccolo e perfetto codice.

    Esempio

    $(document).ready(function () {
    
    (function ($) {
    
        $('#filter').keyup(function () {
    
            var rex = new RegExp($(this).val(), 'i');
            $('.searchable tr').hide();
            $('.searchable tr').filter(function () {
                return rex.test($(this).text());
            }).show();
    
        })
    
    }(jQuery));

    });

    • Grazie. Mi ha aiutato molto.
    • Ho bisogno di mostrare Aggiungere di Nuovo in lista, se non ho la voce can u help me ??

Lascia un commento