deviscoding/searchable

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

维护者

详细信息

github.com/jonesiscoding/searchable

主页

源代码

问题

安装次数: 108

依赖者: 2

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言：JavaScript

3.0 2023-01-31 20:19 UTC

MIT 2a2e05ef545d3bf34374dcb979552f77539a7361

javascriptsearchdomajaxcallbackfind

This package is auto-updated.

Last update: 2024-09-13 21:07:30 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 });