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

Light Javascript table filter, displaying results with minimum character input?

本文关键字：字符输入 显示 结果 Javascript 过滤器 轻量级      更新时间：2023-09-26

>我正在使用此脚本来过滤表：

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

对于我的一生，我不知道如何让这个脚本仅在输入一定数量的字符时显示搜索结果。 现在，它将搜索是否有任何输入放入过滤器框，并且我试图仅在输入至少三个字符时才让它显示结果。

var limits = {
minChars: 3
}

我知道我可能应该为此使用 jQuery，但这是我目前致力于的。

下面是一个使用您的代码的简单示例。我们基本上"忽略"该值，直到它达到一定数量的字符并存储它并使用该变量......

(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);

工作代码。如果您需要任何澄清，请告诉我。

	(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>

相关文章：