mostrare dinamicamente/nascondere div sulla base degli input di testo

Question

Sto lavorando su un sito web, ho una pagina contenente un elenco delle persone costruite in questo modo:

<div class="personsMenu"> 
    <div class="person"> 
     <div class="name">John</div> 
     <div class="age">18</div> 
    </div> 
    <div class="person"> 
     <div class="name">Kate</div> 
     <div class="age">24</div> 
    </div> 
    <div class="person"> 
     <div class="name">Tom</div> 
     <div class="age">17</div> 
    </div> 
</div> 

devo anche una casella di testo <input type="Text" id="filterTextBox"/>

utilizzando jQuery ho bisogno di fare quanto segue:

Quando l'inizio di digitazione dell'utente nella casella di testo del div in cui il "nome" non contiene i caratteri scompare (una sorta di un filtro dinamico, si vede solo le persone che di il nome contiene la scritta dieci caratteri)

Quindi la logica dovrebbe essere come questo:

Quando l'utente digita un carattere nella casella di testo (o rimuovere uno) abbiamo scorrere tutti i div "persona" e se il "nome" div all'interno quella "persona" contiene i caratteri che mostriamo, altrimenti la nascondiamo (.show() e .hide() in jquery)

E ovviamente se la casella di testo è vuota mostriamo tutto.

Questo può essere fatto?

Grazie per qualsiasi aiuto

Answer 1

Ad ogni battitura, si potrebbe .toggle() ogni .person, passando una variabile che indica se o non corrisponde al valore corrente, e dovrebbe quindi essere mostrato.

$('.my-textbox').keyup(function() { 
    var value = $(this).val(); 
    var exp = new RegExp('^' + value, 'i'); 

    $('.personsMenu .person').each(function() { 
     var isMatch = exp.test($('.name', this).text()); 
     $(this).toggle(isMatch); 
    }); 
});​ 

Modificare l'espressione come meglio credi. In questa versione, controlla che il nome inizi con con il valore inserito e ignori l'alloggiamento.

Demo

Answer 2

Dal momento che ti hanno taggato questo con jQuery mi raccomando loro Autocomplete UI Control. L'ho usato su diversi progetti e puoi aggiornare la funzione di ricerca per utilizzare un archivio dati locale come questo. Come nota a margine, si potrebbe voler considerare l'utilizzo <ul> 's e <li>' s ...

codice di esempio

//Search-As-You-Type 
$(id).find('input').autocomplete({ 
    minLength: 2, 
    focus: function(event, ui) {}, 
    select: function(event, ui) {}, 
    source: function(request, response){ 
     //here is where you want to call your custom function 
     findSite(request.term);    
    } 
}); 

Answer 3

Ecco uno script si dovrebbe considerare che uso e creato. Dovresti usare anche <ul> e <li>.

(function($){ 
    $.tzFilter = function(jq, phrase, type, column, ifHidden){ 
     var new_hidden = false; 
     if(this.last_phrase === phrase){ 
      return false; 
     } 

     if(!type){ 
      type = 'ul'; 
     } 

     var phrase_length = phrase.length; 
     var words = phrase.toLowerCase().split(' '); 

     var matches = function(elem){ 
      elem.show() 
     } 
     var noMatch = function(elem){ 
      elem.hide(); 
      new_hidden = true 
     } 
     var getText = function(elem){ 
      return elem.text() 
     } 

     if(column){ 
      var index = null; 
      if(type == 'table'){ 
       jq.find('thead > tr:last > th').each(function(i){ 
        if($.trim($(this).text()) == column){ 
         index = i; return false; 
        } 
       }); 
      } else if (type == 'ul'){ 
       jq.find("li").each(function(i){ 
        if(!$(this).attr('display', 'none')){ 
         if($.trim($(this).text()) == column){ 
         index = i; return false; 
         } 
        } 
       }); 
      } 

      if(index == null){ 
       throw('Index non trouvée: ' + column + '') 
      } 

      if(type == 'table'){ 
       getText = function(elem){ 
        return jQuery(elem.find(('td:eq(' + index + ')') )).text(); 
       } 
      } else if (type == 'ul') { 
       getText = function(elem){ 
        return jQuery(elem.find(('"li:eq(' + index + ')') )).text(); 
       } 
      } 
     } 

     // On a simplement ajouté une lettre, on va regarder pour le nouveau mot, sans devoir tout regarder à nouveau 
     if((words.size > 1) && (phrase.substr(0, phrase_length - 1) === this.last_phrase)){ 
      if(phrase[-1] === ' '){ 
       this.last_phrase = phrase; 
       return false; 
      } 

      // On va chercher uniquement pour le nouveau mot 
      var words = words[-1]; 

      // On cache uniquement les tables visibles 
      matches = function(elem) {;} 

      if(type == 'table'){ 
       var elems = jq.find('tbody > tr:visible'); 
      } else if (type == 'ul'){ 
       var elems = jq.find('li:visible'); 
      } 
     } else { 
      new_hidden = true; 

      if(type == 'table'){ 
       var elems = jq.find('tbody > tr') 
      } else if (type == 'ul') { 
       var elems = jq.find('li') 
      } 
     } 


     elems.each(function(){ 
      var elem = $(this); 
      $.tzFilter.has_words(getText(elem), words, false) ? matches(elem) : noMatch(elem); 
     }); 

     last_phrase = phrase; 

     if(ifHidden && new_hidden){ 
      ifHidden(); 
     } 
     return jq; 
    }; 

    // On cache pour accélérer le tout 
    $.tzFilter.last_phrase = "" 

    $.tzFilter.has_words = function(str, words, caseSensitive){ 
     var text = caseSensitive ? str : str.toLowerCase(); 
     for (var i=0; i < words.length; i++){ 
      if(text.indexOf(words[i]) === -1){ 
       return false; 
      } 
     } 
     return true; 
    } 
})(jQuery); 

Answer 4

Ecco qualcosa per iniziare. Sono sicuro che è tutt'altro che perfetto, ma non hai mostrato ciò che hai già provato e cosa è andato storto nella tua domanda.

$("#filterTextBox").on("keyup", function() { 
    var search = this.value; 
    $(".person").show().filter(function() { 
     return $(".name", this).text().indexOf(search) < 0; 
    }).hide();   
});​​​​​​​​​​​​​ 

Ecco uno working example.

Answer 5

$('input').keyup(function(){ 
    var value = this.value 
    $('.person') 
    .hide() 
    .children('.name') 
    .filter(function(){ 
     var re = new RegExp(value) 
     return re.test($(this).text()) 
    }) 
    .parent() 
    .show() 
}) 

Answer 6

Recentemente ho bisogno di questo tipo di lavoro, e trovo una bella soluzione.Vedere questo jQuery popout div next to element of my choice

Answer 7

Questa ricerca di codice intera stringa

$('#input-text').keyup(function() { 
    var value = $(this).val(); 
    $('#filter-parant > .filter-div').each(function() { 
     $('.filter-div:contains("' + value + '")').show(); 
     $('.filter-div:not(:contains("' + value + '"))').hide(); 

    }); 
}); 

Spero che questo vi aiuterà a