jquery dynamische Filterliste

Ich versuche, eine Filterliste auf keypress zu machen. Wenn ich zum Beispiel in die Eingabe "It" schreibe, werden die Elemente, die nicht mit diesem Eingabewert übereinstimmen, ausgeblendet. Ich bin mir nicht sicher, ob die Idee, die ich mit Code unten habe, die Arbeit macht. Irgendwelche Tipps werden sehr geschätzt!jquery dynamische Filterliste

$('ul li ul li').addClass('displayNone'); 
 

 
var geInputValue = $('input').val(); 
 
var getInputLength = $('input').length; 
 

 
function sortDynamically(){ 
 
    $('input').on('keypress', function(){ 
 
    for(var i=0; i < getInputLength; i++){ 
 
     if(getInputValue === $('li').text){ 
 
     // remove everything that doesnt match input value 
 
     $('li').siblings().addClass('displayNone'); 
 
     } 
 
     else{ 
 
     $('li').siblings().removeClass('displayNone'); 
 
    }); 
 
} 
 
    
 
sortDynamically();

ul, li{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.displayNone{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<ul class="list"> 
 
    <li>Item</li> 
 
    <li>Product 
 
    <ul> 
 
     <li>Bike</li> 
 
    </ul> 
 
    </li> 
 
    <li>About</li> 
 
</ul>

Quelle

2016-04-23 nehel

Nach Ihrem Code Sie versuchen, Elemente verwenden können, zu verbessern, um zu filtern, aber nicht um sie zu sortieren. Könnten Sie die Frage klären? –

Gute Nachricht! Danke x) – nehel

jQuery bietet filter s und Javascript implementiert toLowerCase() und includes() Methoden, die Sie Ihren Code

<body> 
    <style> 
     .displayNone 
     { 
      display: none; 
     } 
    </style> 
    <input type="text" id="input-filter"/> 
    <ul class="list"> 
     <li>Item</li> 
     <li>Product 
      <ul> 
       <li>Bike</li> 
      </ul> 
     </li> 
     <li>About</li> 
    </ul> 
    <script> 
     var items = $('ul.list li'); 
     $('#input-filter').on('input', function ($event) 
     { 
      items.addClass('displayNone').filter(function (item) 
      { 
       return $(this).text().toLowerCase().includes($($event.target).val().toLowerCase()); 
      }).removeClass('displayNone'); 
     }); 
    </script> 
</body>

Quelle

2016-04-23 10:43:29

Das ist auch ein guter Punkt. – nehel

Filter Dieser Code basiert auf, was Sie eingeben. Wenn in der Texteingabe nichts ist, wird alles angezeigt.

$('input').on('keypress keyup', function(){ 
 
    var value = $(this).val().toLowerCase(); 
 
    if (value != '') { 
 
    
 
     $('.list > li').each(function() { 
 
     if ($(this).text().toLowerCase().indexOf(value) > -1) { 
 
      $(this).removeClass('displayNone'); 
 
     } else { 
 
      $(this).addClass('displayNone'); 
 
     } 
 
     }); 
 
    } else { 
 
     $('.list > li').removeClass('displayNone'); 
 
    } 
 
});

ul, li{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.displayNone{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" /> 
 
<ul class="list"> 
 
    <li>Item</li> 
 
    <li>Product 
 
    <ul> 
 
     <li>Bike</li> 
 
    </ul> 
 
    </li> 
 
    <li>About</li> 
 
</ul>

Quelle

2016-04-23 10:25:33 AKS

Ich sehe, vielen Dank! – nehel

jquery dynamische Filterliste

Antwort

Verwandte Themen