防止自动搜索/添加搜索按钮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。

我为搜索添加了一个button，它将调用函数search()，您将在其中获得搜索文本值并手动搜索。

要手动搜索，请阅读提供的文档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>