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());
});