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