自動検索の禁止/検索ボタンの追加List.js

Question

これは簡単な問題ですが、解決策はlist.jsのドキュメントのどこにも見つかりませんでした。検索フィールドに入力する際に​​リストを自動検索できないようにする代わりに、代わりに検索ボタンを追加するにはどうすればよいですか？検索のための

var options = { 
 
    valueNames: ['material', 'type', 'thickness', 'height', 'category'] 
 
}; 
 

 
var featureList = new List('piece-search', options);

.item { 
 
    margin: 0.5em; 
 
    padding: 0.5em; 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    background: #229B55; 
 
    color: #F4F4F4; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); 
 
} 
 

 
.item p { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="page"> 
 
     <div id="main"> 
 
      <div class="c1"> 
 
       <div id="piece-search"> 
 
        <ul class="sort-by"> 
 
         <li> 
 
          <input class="search" placeholder="Search pieces"> 
 
         </li> 
 
        </ul> 
 

 
        <ul class="list"> 
 

 
         <li class="item"> 
 
          <p class="sorting-info hide-this"> 
 
           <p class="material">plastic</p> 
 
           <p class="type">pipe</p> 
 
           <p class="thickness">3mm</p> 
 
           <p class="height">15inch+</p> 
 
           <p class="category">artsy</p> 
 
         </li> 
 

 
         <li class="item"> 
 
          <p class="sorting-info hide-this"> 
 
           <p class="material">glass</p> 
 
           <p class="type">pipe</p> 
 
           <p class="thickness">5mm</p> 
 
           <p class="height">14inch-</p> 
 
           <p class="category">scientific</p> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

defaultクラスは、ドキュメントによると、 "検索" です。したがって、自動検索を防ぐためにclassnameをテキスト入力ボックスから削除/変更する必要がありますonkeyup。

search()を呼び出す検索のためにbuttonを追加しました。ここで検索テキストの値が得られ、手動で検索します。

手動で検索するには、hereのマニュアルを参照してください。ボタンのクリックでトリガします

JS機能：

function search() { 
    var searchText = document.getElementById("searchText").value; 
    //console.log(searchText); 

    var options = { 
    valueNames: ['material', 'type', 'thickness', 'height', 'category'] 
    }; 

    var featureList = new List('piece-search', options); 
    // Search manually 
    featureList.search(searchText); 

    // Search manually on specific columns 
    //listObj.search(searchText, [ 'material' ]); 
} 

function search() { 
 
    var searchText = document.getElementById("searchText").value; 
 
    //console.log(searchText); 
 

 
    var options = { 
 
    valueNames: ['material', 'type', 'thickness', 'height', 'category'] 
 
    }; 
 

 
    var featureList = new List('piece-search', options); 
 
    // Search manually 
 
    featureList.search(searchText); 
 

 
    // Search manually on specific columns 
 
    //listObj.search(searchText, [ 'material' ]); 
 
}

.item { 
 
    margin: 0.5em; 
 
    padding: 0.5em; 
 
    width: 150px; 
 
    height: 150px; 
 
    float: left; 
 
    background: #229B55; 
 
    color: #F4F4F4; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); 
 
} 
 

 
.item p { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="page"> 
 
    <div id="main"> 
 
     <div class="c1"> 
 
     <div id="piece-search"> 
 
      <ul class="sort-by"> 
 
      <li> 
 
       <input id="searchText" placeholder="Type text to search"> 
 
      </li> 
 
      <li> 
 
       <input type="button" class="searchButton" value="Search pieces" onclick="search()"> 
 
      </li> 
 
      </ul> 
 

 
      <ul class="list"> 
 

 
      <li class="item"> 
 
       <p class="sorting-info hide-this"> 
 
       <p class="material">plastic</p> 
 
       <p class="type">pipe</p> 
 
       <p class="thickness">3mm</p> 
 
       <p class="height">15inch+</p> 
 
       <p class="category">artsy</p> 
 
      </li> 
 

 
      <li class="item"> 
 
       <p class="sorting-info hide-this"> 
 
       <p class="material">glass</p> 
 
       <p class="type">pipe</p> 
 
       <p class="thickness">5mm</p> 
 
       <p class="height">14inch-</p> 
 
       <p class="category">scientific</p> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>