jquery searchable下载 - jquery searchable源码下载

jquery searchable

其他源码

vents

下载

jQuery 可搜索插件

最新版本：v1.1.0 （查看更新日志）

微型、快速的 jQuery 插件，可在您键入时搜索元素。该插件由Stidges ( Twitter | Github ) 创建和维护。

特征

轻的。这个插件经过压缩和压缩后只有 ~1kB！
快速地。该插件针对快速、无滞后的搜索进行了优化，甚至可以通过大型元素集进行搜索。
多种搜索类型。该插件提供了三种不同的开箱即用搜索类型！模糊匹配、严格（区分大小写）匹配和默认（不区分大小写）匹配。
自动行划线。在表中搜索时，如果行不匹配，则行会被隐藏。当使用像 Bootstrap 这样的 CSS 框架时，这会弄乱你的表格条纹。该插件允许您定义要应用于奇数行和偶数行的 CSS，并在搜索时更新它们。
自定义显示/隐藏。您可以定义自定义函数以在搜索时显示和隐藏元素。
搜索任何东西。该插件不限于在表格上使用，任何包含“行”和“列”的元素集都可以使用。

演示

单击此处查看该插件的实际演示（托管在 Bootsnipp 上）

入门

基本用法

下载此插件后，加载 jQuery 后将其包含在 HTML 文件中：

 < script src =" jquery.js " > </ script >
< script src =" jquery.searchable.js " > </ script >

注意：如果你想支持像<IE9这样的旧版浏览器，你可以使用jquery.searchable-ie.js而不是jquery.searchable.js 。此版本包含Array.prototype.reduce函数的填充，因此稍大（几百字节）。

之后，您可以简单地在所需元素上初始化插件。此示例使用 id 为“table”的表。默认情况下，该插件使用 id 为“search”的输入（请参阅下面的配置部分了解如何更改此设置）：

 $ ( '#table' ) . searchable ( ) ;

配置

该插件提供以下配置选项：

选项	默认值	描述
选择器	`'tbody tr'`	在初始化插件的元素中定义主 jQuery 选择器。这将选择要显示或隐藏的容器元素，例如表中的`tr`或可搜索元素中的`div.your-special-class` 。
子选择器	`'td'`	定义上面定义的“选择器”内的子选择器。这将选择 'selector' 元素中的可搜索元素，例如`td`或`.searchable` 。
搜索字段	`'#search'`	用于搜索输入过滤器的输入元素
有条纹的	`false`	定义元素是否条带化以及是否应在搜索时重新条带化（ `true`或`false` ）
奇数行	`{ }`	定义应用于奇数行的 CSS 对象（当`striped`设置为`true`时）。
偶数行	`{ }`	定义应用于偶数行的 CSS 对象（当`striped`设置为`true`时）。
隐藏	`function`	允许您定义自定义隐藏功能。该函数接受一个参数，即被隐藏的元素（行）。默认情况下，它将使用`elem.hide()`来隐藏该行。
展示	`function`	允许您定义自定义显示功能。该函数接受一个参数，即被隐藏的元素（行）。默认情况下，它将使用`elem.show()`显示该行。
搜索类型	`'default'`	定义搜索时要使用的匹配器。允许的值为`'fuzzy'` 、 `'strict'`和`'default'` 。
搜索活动	`false`	允许您定义搜索处于活动状态时要调用的函数。每当用户在搜索输入中键入并且搜索输入不为空时，就会调用此函数。可搜索元素和搜索词将传递给该函数。
搜索空	`false`	允许您定义搜索输入为空时要调用的函数。当搜索输入为空或清除时，将调用该函数一次。可搜索元素将传递给该函数。
搜索焦点	`false`	允许您定义当搜索输入获得焦点时要调用的函数。该函数的`this`上下文将是搜索输入元素。
搜索模糊	`false`	允许您定义搜索输入模糊时要调用的函数。该函数的`this`上下文将是搜索输入元素。
加载时清除	`false`	确定是否应在页面加载时清除搜索输入（ `true`或`false` ）。

用法示例

此示例使用上面显示的配置来自定义插件：

 $ ( '#element' ) . searchable ( {
    selector      : '.row' ,
    childSelector : '.column' ,
    searchField   : '#mySearchInput' ,
    striped       : true ,
    oddRow        : { 'background-color' : '#f5f5f5' } ,
    evenRow       : { 'background-color' : '#fff' } ,
    hide          : function ( elem ) {
        elem . fadeOut ( 50 ) ;
    } ,
    show          : function ( elem ) {
        elem . fadeIn ( 50 ) ;
    } ,
    searchType    : 'fuzzy' ,
    onSearchActive : function ( elem , term ) {
        elem . show ( ) ;
    } ,
    onSearchEmpty : function ( elem ) {
        elem . hide ( ) ;
    } ,
    onSearchFocus : function ( ) {
        $ ( '#feedback' ) . show ( ) . text ( 'Type to search.' ) ;
    } ,
    onSearchBlur : function ( ) {
        $ ( '#feedback' ) . hide ( ) ;
    } ,
    clearOnLoad : true
} ) ;