jquery searchableダウンロード - jquery searchableソースコードのダウンロード

jquery searchable

その他のソースコード

vents

ダウンロード

jQuery 検索可能プラグイン

最新バージョン: v1.1.0 (変更ログを参照)

入力時に要素を検索する、小型で高速な jQuery プラグイン。このプラグインはStidges ( Twitter | Github ) によって作成および保守されています。

特徴

軽量。このプラグインはわずか 1kB まで縮小され、gzip 圧縮されています。
速い。このプラグインは、大規模な要素セットでも高速で遅れのない検索を実現できるように最適化されています。
複数の検索タイプ。このプラグインは、すぐに使用できる 3 つの異なる検索タイプを提供します。ファジーマッチング、厳密 (大文字と小文字を区別する) マッチング、およびデフォルト (大文字と小文字を区別しない) マッチング。
自動行ストライピング。テーブルを検索する場合、一致しない行は非表示になります。 Bootstrap のような CSS フレームワークを使用すると、テーブルのストライピングが台無しになります。このプラグインを使用すると、奇数行と偶数行に適用する CSS を定義し、検索中にそれらを更新できます。
カスタムの表示/非表示。検索中に要素を表示または非表示にするためのカスタム関数を定義できます。
何でも検索してください。このプラグインはテーブルでの使用に制限されておらず、内部に「行」と「列」を含む要素のセットを使用できます。

デモ

このプラグインの動作デモを表示するには、ここをクリックしてください (Bootsnipp でホストされています)

はじめる

基本的な使い方

このプラグインをダウンロードした後、jQuery をロードした後に HTML ファイルにプラグインを含めます。

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

注: <IE9 などの古いブラウザをサポートしたい場合は、 jquery.searchable.jsの代わりにjquery.searchable-ie.jsを使用できます。このバージョンにはArray.prototype.reduce関数のポリフィルが含まれているため、サイズがわずかに大きくなります (数百バイト)。

その後、必要な要素でプラグインを初期化するだけです。この例では、ID が「table」のテーブルを使用します。デフォルトでは、プラグインは「search」という ID を持つ入力を使用します (これを変更する方法については、以下の「設定」セクションを参照してください)。

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

構成

このプラグインは、次の構成オプションを提供します。

オプション	デフォルト値	説明
セレクタ	`'tbody tr'`	プラグインが初期化される要素内でメインの jQuery セレクターを定義します。これにより、テーブル内の`tr`や検索可能な要素内の`div.your-special-class`など、表示または非表示にするコンテナ要素が選択されます。
子セレクター	`'td'`	上で定義した「セレクター」内に子セレクターを定義します。これにより、 `td`や`.searchable`など、「selector」要素内の検索可能な要素が選択されます。
検索フィールド	`'#search'`	検索入力フィルターに使用される入力要素
縞模様の	`false`	要素がストライプ化されており、検索時に再ストライプ化されるかどうかを定義します ( `true`または`false` )。
奇数行	`{ }`	奇数行に適用する CSS オブジェクトを定義します ( `striped` `true`に設定されている場合)。
偶数行	`{ }`	偶数行に適用する CSS オブジェクトを定義します ( `striped` `true`に設定されている場合)。
隠れる	`function`	カスタムの非表示関数を定義できます。この関数は、非表示にする要素 (行) である 1 つのパラメーターを受け入れます。デフォルトでは、 `elem.hide()`使用して行を非表示にします。
見せる	`function`	カスタムの表示関数を定義できます。この関数は、非表示にする要素 (行) である 1 つのパラメーターを受け入れます。デフォルトでは、 `elem.show()`を使用して行を表示します。
検索タイプ	`'default'`	検索時に使用するマッチャーを定義します。許可される値は`'fuzzy'` 、 `'strict'`および`'default'`です。
オンサーチアクティブ	`false`	検索がアクティブなときに呼び出される関数を定義できます。この関数は、ユーザーが検索入力に入力し、検索入力が空でない場合は必ず呼び出されます。検索可能な要素と検索語が関数に渡されます。
onSearchEmpty	`false`	検索入力が空の場合に呼び出される関数を定義できます。この関数は、検索入力が空またはクリアされたときに 1 回呼び出されます。検索可能な要素が関数に渡されます。
オンサーチフォーカス	`false`	検索入力にフォーカスがあるときに呼び出される関数を定義できます。 `this`関数の this コンテキストが検索入力要素になります。
onSearchBlur	`false`	検索入力がぼやけているときに呼び出される関数を定義できます。 `this`関数の 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
} ) ;

変更履歴

バージョン 1.0.0:

初期リリース。

バージョン 1.1.0:

検索ライフサイクル中にカスタム関数を呼び出すことができるいくつかのイベントが追加されました: onSearchActive、onSearchEmpty、onSearchFocus、onSearchBlur (詳細については構成を参照)。
ページの読み込み/更新時に検索入力をクリアできるようにするclearOnLoad設定を追加しました。