Wie zu verbergen/show div auf Keyup-Filter-Eingabe

Question

Ich habe eine Reihe von divs, die aufgeführt sind, und ich möchte in der Lage sein, ein Eingabefeld hinzufügen, mit dem ein Benutzer beginnen kann zu tippen und die divs werden entsprechend gefiltert

Ich versuche den folgenden Code, aber es wird nicht gefiltert. Es wird keine Fehler entweder zu werfen, so dass ich bin mir nicht sicher, was an dieser Stelle zu tun ...

Hier ist der HTML-Markup:

<input id="filter" type="text" class="form-control" placeholder="Type here..."> 


<ul id="equipdetails"> 
    <li> 
     <div class="col-lg-8"><label data-equipid="3" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Pega<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="4" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">DOT NET<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="5" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Java<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="6" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">JAVA Script<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="26" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">Ruby On Rails<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
    <li> 
     <div class="col-lg-8"><label data-equipid="27" class="mt-checkbox mt-checkbox-outline exercise-txt"><input type="checkbox">NEW QSS<span></span></label> 
     </div> 
     <div class="col-lg-4"> 
     <div class="exercise-img"></div> 
     </div> 
    </li> 
</ul> 

Hier JS-Code

$('#filter').keyup(function() 
    { 
      var val = $.trim(this.value).toUpperCase(); 
      $(".mt-checkbox").each(function() 
      { 
        var parent = $(this).parent(), 
          length = $(this).text().length > 0; 
        if (length && $(this).text().search(new RegExp(filter, "i")) < 0) 
        { 
          parent.fadeOut("slow"); 
        } 
        else 
        { 
          parent.show(); 
        } 
      }); 
    }) 

Das ist meine Geige

http://jsfiddle.net/cod7ceho/145/

Answer 1

filter in Ihrer Geige bezieht sich auf die input mit id filter

Was müssen Sie in den Wert des input

Ändern Sie diese

if (length && $(this).text().search(new RegExp(filter, "i")) < 0) 

zu

if (length && $(this).text().search(new RegExp($(filter).val(), "i")) 

Und es sollte Arbeit.

Answer 2

Sie müssen die Variable val auf die Suchfunktion passieren, gibt es keine Variable definiert als filter

$(this).text().search(new RegExp(val, "i") 

aber ist es möglich, die Punkte auch zu entfernen, durchqueren bis zu li wie statt sofort Eltern

var parent = $(this).closest('li'), 

Fiddle

Answer 3

Verwenden indexOf() den Wert im Text suchen wie $(this).text().toUpperCase().trim().indexOf(val) < 0

$('#filter').keyup(function() 
    { 

      var val = $.trim(this.value).toUpperCase(); 
      console.log(val); 
      $(".mt-checkbox").each(function() 
      { 
        var parent = $(this).parent(), 
          length = $(this).text().length > 0; 

        if (length && $(this).text().toUpperCase().trim().indexOf(val) < 0) 
        { 
          parent.fadeOut("slow"); 
        } 
        else 
        { 
          parent.show(); 
        } 
      }); 
    }) 

JSFIDDLE

Andere Art und Weise die gleiche Methode zu verwenden, ist Sie verwenden, und den Filter in Ihrem regex mit val da Ihre Notwendigkeit zu ersetzen Bitte senden Sie den Wert in regex nicht das Objekt selbst

$(this).text().search(new RegExp(val, "i")) < 0) 

auch sollten Sie die Punkte, sobald Ihr filte entfernen unsere für das ausblenden der li und dass die Verwendung $(this).closest('li');

JSFIDDLE

Beide Methoden zur Auswahl arbeiten, Es hängt davon ab, die Sie verwenden möchten.