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