exactquery / searchable
3.0
2023-01-31 20:19 UTC
README
用于搜索字段回调、搜索DOM元素和Ajax查询的纯JavaScript类。
SearchInput 使用方法
通常,这个类与 DomSearch
或 AjaxSearch
一起使用,但也可根据以下语法独立使用
let el = document.getElementById('<id of search input>');
let searchCallback = function(query) { console.log('you searched for' + query); };
let clearCallback = function() { console.log('you cleared your search.'; };
let _ = new SearchInput(el, { search: searchCallback, clear: clearCallback });
DomSearch 使用方法
给定以下HTML
<input type="search" id="searchWithMe">
<table id="content">
<tbody>
<tr><td>things</td></tr>
<tr><td>things and stuff</td></tr>
<tr><td>stuff</td></tr>
</tbody>
</table>
此JavaScript将使用类根据 #searchWithMe
输入的条目过滤行
let si = document.getElementById('searchWithMe');
let fn = function(isFound) { this.toggleAttribute('hidden', !isFound); }
let _ = new DomSearch(si, { target: '#content tr', result: fn });
AjaxSearch 使用方法
以下代码是 AjaxSearch
类如何使用的一个示例
let si = document.getElementById('searchWithMe');
let fnResults = function(data) { <your code to do something with the result data> };
let fnReset = function() { <your code to reset the dom to the pre-search state> };
let _ = new AjaxSearch(si, { results: fnResults, reset: fnReset });