List.js - search from multiple locations

Question

How to search from multiple locations with List.js plugin?

<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/

Where are 2 .list lists, but working only on first. Any advice how to search from both lists? Thanks.

Answer 1

You should use multiple containers and your JS needs a bit of adjusting:

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