如何從兩個或多個列表使用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

好的。你的問題有solved.I使用兩個不同的容器和兩個diferrent列表對象，如下圖所示：

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>