插件 jQuery.searcher 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.searcher 中文API文档 https://github.com/lloiser/jquery-searcher

jQuery Searcher Plugin

The jQuery Searcher Plugin connects any list-like data with an input for searching.

Installation

Download the latest release of this plugin on GitHub.

Include the jquery.searcher.js script after the jQuery library (unless you are packaging scripts somehow else):

<script src="/path/to/jquery.searcher.js"></script>

Usage

$("...").searcher({
    itemSelector:  "...", // jQuery selector for the data item element
    textSelector:  "...", // jQuery selector for the element which contains the text
    inputSelector: "..."  // jQuery selector for the input element
});

Example

See the live version of the following example on the GitHub page.

Given the following HTML markup:

<input id="tablesearchinput" />
<table id="tabledata">
    <tbody>
        <tr>
            <td>#1</td>
            <td>Like a Rolling Stone</td>
            <td>Bob Dylan</td>
            <td>1965</td>
        </tr>
        <tr>
            <td>#2</td>
            <td>(I Can't Get No) Satisfaction</td>
            <td>The Rolling Stones</td>
            <td>1965</td>
        </tr>
        ...
    </tbody>
</table>

And executing the following script connects the input with the table:

$("#tabledata").searcher({
    inputSelector: "#tablesearchinput"
    // itemSelector (tbody > tr) and textSelector (td) already have proper default values
});

Documentation

The following table contains all possible options which can be passed to the plugin.

Name Type Description
itemSelector string jQuery selector for the data item element (e.g. tr, li).
Default: "tbody > tr"
textSelector string jQuery selector for the element which contains the text within the item element.
If not specified the data item element is used instead.
Default: "td"
inputSelector string jQuery selector for the input element which is used to filter the data.
Default: ""
caseSensitive bool Determines whether the search should be case sensitive or not.
Default: false
toggle function this function is called for each data item element when the text in the input changes.
it is called with the data item element and a boolean value indicating whether the item contains the text or not.
Default: function(item, containsText) { $(item).toggle(containsText); }

License

Copyright (c) 2014 Lukas Beranek Licensed under the MIT license.

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了