exactquery/searchable

此包已被废弃,不再维护。作者建议使用 deviscoding/searchable 包。

用于管理搜索字段、搜索DOM元素和JSON源的纯JavaScript类。

3.0 2023-01-31 20:19 UTC

This package is auto-updated.

Last update: 2023-09-13 19:09:35 UTC


README

用于搜索字段回调、搜索DOM元素和Ajax查询的纯JavaScript类。

SearchInput 使用方法

通常,这个类与 DomSearchAjaxSearch 一起使用,但也可根据以下语法独立使用

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