List.js - поиск по нескольким адресам

Question

Как выполнить поиск из нескольких мест с помощью плагина List.js?

<div id="test_list"> 

<input type="text" class="fuzzy-search" /> 

<div class="clear"></div> 

<ul class="list" style="width: 33.333%; float: left;"> 
<li><p class="city">Guybrush Threepwood</p></li> 
<li><p class="city">Elaine Marley</p></li> 
<li><p class="city">LeChuck</p></li> 
<li><p class="city">Stan</p></li> 
<li><p class="city">Voodoo Lady</p></li> 
<li><p class="city">Herman Toothrot</p></li> 
<li><p class="city">Meathook</p></li> 
</ul> 

<ul class="list" style="width: 33.333%; float: left;"> 
<li><p class="city">Carla</p></li> 
<li><p class="city">Otis</p></li> 
<li><p class="city">Rapp Scallion</p></li> 
<li><p class="city">Rum Rogers Sr.</p></li> 
<li><p class="city">Men of Low Moral Fiber</p></li> 
<li><p class="city">Murray</p></li> 
<li><p class="city">Cannibals</p></li> 
</ul> 

</div> 

http://jsfiddle.net/9yyx3tp7/

Где 2 перечислены .list, но работает только на первом. Любые советы по поиску из обоих списков? Благодарю.

Answer 1

Вы должны использовать несколько контейнеров и ваш JS нужно немного регулировочного:

HTML:

<input type="text" class="fuzzy-search" /> 
<div class="clear"></div> 

<div id="list1"> 
<ul class="list" style="width: 33.333%; float: left;"> 
<li><p class="city">Guybrush Threepwood</p></li> 
<li><p class="city">Elaine Marley</p></li> 
<li><p class="city">LeChuck</p></li> 
<li><p class="city">Stan</p></li> 
<li><p class="city">Voodoo Lady</p></li> 
<li><p class="city">Herman Toothrot</p></li> 
<li><p class="city">Meathook</p></li> 
</ul> 
</div> 
<div id="list2"> 
<ul class="list" style="width: 33.333%; float: left;"> 
<li><p class="city">Carla</p></li> 
<li><p class="city">Otis</p></li> 
<li><p class="city">Rapp Scallion</p></li> 
<li><p class="city">Rum Rogers Sr.</p></li> 
<li><p class="city">Men of Low Moral Fiber</p></li> 
<li><p class="city">Murray</p></li> 
<li><p class="city">Cannibals</p></li> 
</ul> 

</div> 

JS:

var args = { 
    valueNames: [ 'city' ] 
}; 

var list1 = new List("list1", args); 
var list2 = new List("list2", args); 

$(".fuzzy-search").keyup(function(){ 
    list1.search($(this).val()); 
    list2.search($(this).val()); 
});