如何使用list.js从两个或多个列表中搜索

Question

我想问一下如何使用list.js

从两个或多个列表中检索过滤结果

让我解释一下使用图片：

这是我的HTML：

<div id="SearchBarContainer" class="col l10 offset-l1">
                        <input name="SearchData" class="search" placeholder="Search Anything !" />
                        <h1 class="McqHeading">MCQs</h1>
                        <ul class="list">
                            <li>
                                <p class="mcq">Mcqs One</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Two</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Three</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Four</p>
                            </li>
                            <li>
                                <p class="mcq">Mcqs Five</p>
                            </li>
                        </ul>
                        <h1 class="NotesHeading">Notes</h1>
                        <ul class="list2">
                            <li>
                                <p class="note">Notes One</p>
                            </li>
                            <li>
                                <p class="note">Notes Two</p>
                            </li>
                            <li>
                                <p class="note">Notes Three</p>
                            </li>
                            <li>
                                <p class="note">Notes Four</p>
                            </li>
                            <li>
                                <p class="note">Notes Five</p>
                            </li>
                        </ul>
                    </div>

这是我正在使用的Javascript：

var options = {
valueNames: [ 'mcq','note' ],
listClasses: ['list','list2']
};

 var DownloadsList = new List('SearchBarContainer', options);

以下是它产生的结果：

当我输入 b 时，它只检查了第一个列表。我希望代码能够检查两个列表。

有没有办法这样做？

Answer 1

确定。你的问题已经解决了。我使用了两个不同的容器和两个不同的列表对象，如下所示：

var options_1 = {
  valueNames: [ 'mcq' ]
};
    
var options_2 = {
  valueNames: [ 'note' ]
};

var list1 = new List("SearchBarContainer_1",options_1);
var list2 = new List("SearchBarContainer_2",options_2);

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

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="SearchData" class="search" placeholder="Search Anything !" />
    <div id="SearchBarContainer_1" class="col l10 offset-l1">
                        
                        <h1 class="McqHeading">MCQs</h1>
                        <ul class="list">
                          
                            <li class="a">
                                <p class="mcq">Mcqs One</p>
                            </li>
                            <li class="a">
                                <p class="mcq">Mcqs Two</p>
                            </li>
                            <li class="a">
                                <p class="mcq">Mcqs Three</p>
                            </li>
                            <li class="a">
                                <p class="mcq">Mcqs Four</p>
                            </li>
                            <li class="a">
                                <p class="mcq">Mcqs Five</p>
                            </li>
                            </ul>
                            </div>
    <div id="SearchBarContainer_2" class="col l10 offset-l1">   
                        <h1 class="NotesHeading">Notes</h1>
                       <ul class="list">
                            <li class="b">
                                <p class="note">Notes One</p>
                            </li>
                            <li class="b">
                                <p class="note">Notes Two</p>
                            </li>
                            <li class="b">
                                <p class="note">Notes Three</p>
                            </li>
                            <li class="b">
                                <p class="note">Notes Four</p>
                            </li>
                            <li class="b">
                                <p class="note">Notes Five</p>
                            </li>
                         
                        </ul>
                    </div>