如何使用 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 时，它只检查了 First 列表。我希望代码检查两个列表。

有什么办法吗？

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>