Prevent auto search / add a search button List.js

Question

This should be a straightforward problem but I haven't found the solution anywhere on the list.js documentation. How do I go about preventing the list from auto searching as I type in the search field and instead add a search button instead?

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

The default class for search is "search" according to the documentation. So, you need to remove/change the classname from text input box in order to prevent auto search onkeyup.

I added a button for search that will call the function search() where you will get the search text value and search manually.

To search manually, read the documentation provided here.

JS function that will trigger on button click:

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>