轻量级Javascript表过滤器，以最少的字符输入显示结果？

Question

I am using this script to filter a table:

http://codepen.io/chriscoyier/pen/tIuBL

For the life of me, I cannot figure out how to get this script to only display search results when a certain number of characters are entered. Right now, it will search if any input is put into the filter box and I'm trying to get it to show results only if a minimum of three characters have been entered.

var limits = {
minChars: 3
}

I know I should probably be using jQuery for this, but this is what I am committed to at the moment.

Answer 1

Here is a simple example using your code. We basically 'ignore' the value until it reaches a certain number of characters the store it and use that variable...

(function(document) {
  'use strict';

  var LightTableFilter = (function(Arr) {

    var _input;
    var _value;

    function _onInputEvent(e) {
      _input = e.target;
      _value = _input.value;
      if (_input.value.length < 3) {
        _value = '';
      }
      ...
    }

    function _filter(row) {
      var text = row.textContent.toLowerCase(),
        val = _value.toLowerCase();
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }

    ...

})(document);

Answer 2

Working code. Let me know if you need any clarification.

  (function(document) { 'use strict'; var LightTableFilter = (function(Arr) { var _input; function _onInputEvent(e) { console.log(e); _input = e.target; var tables = document.getElementsByClassName(_input.getAttribute('data-table')); Arr.forEach.call(tables, function(table) { Arr.forEach.call(table.tBodies, function(tbody) { if(e.code === "Backspace"){ Arr.forEach.call(tbody.rows, _defaultfilter); }else{ Arr.forEach.call(tbody.rows, _filter); } }); }); } function _defaultfilter(row) { console.log(row); var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase(); row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; } function _filter(row) { console.log(row); var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase(); console.log(_input.value); if(val.length >= 3){ row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; } } return { init: function() { var inputs = document.getElementsByClassName('light-table-filter'); Arr.forEach.call(inputs, function(input) { input.addEventListener("keyup", _onInputEvent); }); } }; })(Array.prototype); document.addEventListener('readystatechange', function() { if (document.readyState === 'complete') { LightTableFilter.init(); } }); })(document); 

 <section class="container"> <h2>Light Javascript Table Filter</h2> <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter"> <table class="order-table table"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john.doe@gmail.com</td> <td>0123456789</td> <td>99</td> </tr> <tr> <td>Jane Vanda</td> <td>jane@vanda.org</td> <td>9876543210</td> <td>349</td> </tr> <tr> <td>Alferd Penyworth</td> <td>alfred@batman.com</td> <td>6754328901</td> <td>199</td> </tr> </tbody> </table> </section>