ホーム>プログラミング関連>その他のソースコード
ダウンロード

jQuery オートコンプリーター プラグイン

デモ

ここ: Crayola カラーを使用した例。

使用法

インストール

npm:

npm install --save jquery-autocompleter

糸：

yarn add jquery-autocompleter

プロジェクトにプラグインを追加する

  • jQuery を含める: 

     < script src =" http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js " > </ script >

  • プラグインのコードを含めます。 

     <!-- Styles -->
< link rel =" stylesheet " href =" css/jquery.autocompleter.css " />

<!-- Scripts -->
< script src =" js/jquery.autocompleter.min.js " > </ script >

  • プラグインを呼び出します: 

     $ ( "input" ) . autocompleter ( {
  /* options */
} ) ;

例

  • リモートURL 

     $ ( function ( ) {
  $ ( "input" ) . autocompleter ( { source : "path/to/get_data_request" } ) ;
} ) ;

  • 無地

     var data = [
  { value : 1 , label : "one" } ,
  { value : 2 , label : "two" } ,
  { value : 3 , label : "three" } ,
] ;

$ ( function ( ) {
  $ ( "input" ) . autocompleter ( { source : data } ) ;
} ) ;

オプション

オートコンプリーターには次のオプションがあります。

名前タイプ説明デフォルト
ソースstr、objサーバーまたはローカル オブジェクトへの URLヌル
ローカルとしてブールリモート応答をローカルソースとして解析する間違い
空のブール値が空の場合に起動する真実
限界整数表示される結果の数10
最小の長さ整数オートコンプリーターの最小長0
遅れ整数リクエストを延期するまでの数ミリ秒0
カスタムクラス配列オートコンプリーター要素のカスタム クラスを含む配列[]
キャッシュブールリクエストの繰り返しを避けるために、xhr データを localStorage に保存します。真実
キャッシュの期限切れ整数localStorage データの有効期間 (秒単位) (キャッシュの有効期限を無効にする場合は 0) 86400
フォーカス開くブール入力がフォーカスを取得したときにオートコンプリーターを起動する真実
入力して選択してくださいブールEnterキーを使用して選択できるようにします真実
ヒントブール最初に一致したラベルを入力にヒントを追加します。正しいスタイルをインストールする必要があります。間違い
最初に選択ブールtrueに設定すると、オートコンプリート リストの最初の要素が自動的に選択され、changeWhenSelect がオンの場合は無視されます。間違い
変更時選択ブールオートコンプリート リストで矢印キー ナビゲーションを使用して入力値を変更できるようにします真実
ハイライトマッチブールこのオプションは、オートコンプリート結果内の一致に対する<strong>タグ ラップを定義します。間違い
無視されたキーコード配列無視できるキーコードを含む配列、デフォルト: 9, 13, 17, 19, 20, 27, 33, 34, 35, 36, 37, 39, 44, 92, 113, 114, 115, 118, 119, 120, 122, 123, 144, 145 []
カスタムラベルstrラベルとして使用されるオブジェクトのプロパティの名前間違い
カスタム値str値として使用されるオブジェクトのプロパティの名前間違い
送信前関数この関数は、ajax リクエストの前にトリガーされます$.noop
onBeforeShow関数この関数は、リストを表示する準備ができたときにトリガーされます。 $.noop
空の関数データリストが空の場合、この関数をトリガーします$.noop
onItem関数この関数は、各アイテムの表示準備が行われているときにトリガーされます。 $.noop
onListOpen関数この関数はリストが表示されたときにトリガーされます$.noop
onListClose関数この関数は、リストが非表示になっているときにトリガーされます。 $.noop
onBeforeLaunch関数新しいリクエストの前にイベントがトリガーされました (ローカル キャッシュを含む) $.noop
テンプレートstrリスト項目のカスタム テンプレート。例: <span>{{ label }} is {{ customPropertyFromSource }}</span> 。テンプレートは.autocompleter-itemに追加されます。間違い
オフセットstrソース応答オフセット (例: "response.items.posts" 。
@deprecated代わりにformatを使用してください		間違い
形式関数ソース データを返すように応答ペイロードをフォーマットするヌル
組み合わせる関数Ajax データを拡張したオブジェクトを返します。追加のサーバー オプションを渡したい場合に便利です$.noop
折り返し電話関数値の選択コールバック関数。引数: value 、 index 、 object $.noop

メソッド

プラグインの定義後にオプションを変更する

 $ ( "#input" ) . autocompleter ( "option" , data ) ;

例えば： 

 $ ( "#input" ) . autocompleter ( "option" , {
  limit : 5 ,
  template :
    '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}' ,
} ) ;

オープンリスト

 $ ( "#input" ) . autocompleter ( "open" ) ;

リストを閉じる

 $ ( "#input" ) . autocompleter ( "close" ) ;

プラグインを破棄する

 $ ( "#input" ) . autocompleter ( "destroy" ) ;

すべてのキャッシュをクリア

 $ . autocompleter ( "clearCache" ) ;

デフォルトを設定する

 $ . autocompleter ( "defaults" , {
  customClass : "myClassForAutocompleter" ,
} ) ;

もう 1 つの例

キャッシュ、一致の強調表示、および 5 つの結果制限を備えた名入力のオートコンプリーター。遠隔応答は性別によって異なります。

フォームのマークアップ

 < fieldset >
  < label > Male </ label >
  < input type =" radio " name =" gender " value =" male " checked =" checked " />

  < label > Female </ label >
  < input type =" radio " name =" gender " value =" female " />

  < label > Other </ label >
  < input type =" radio " name =" gender " value =" other " />

  < label > First Name </ label >
  < input type =" text " name =" firstname " id =" firstname " />
</ fieldset >

コード

 $ ( function ( ) {
  $ ( "#firstname" ) . autocompleter ( {
    source : "https://EXAMPLE_API_ENDPOINT.com/api/search/name" ,
    limit : 5 ,
    cache : true ,
    combine : function ( params ) {
      var gender = $ ( "input:radio[name=gender]:checked" ) . val ( ) ;

      // passing params to match endpoint
      return {
        q : params . query ,
        count : params . limit ,
        gender : gender ,
      } ;
    } ,
    format : function ( data ) {
      // map response data to match autocompleter
      return data . entries . map ( function ( item ) {
        return {
          label : item . name ,
          value : item . slug ,
        } ;
      } ) ;
    } ,
    callback : function ( value , index , object ) {
      console . log (
        "Value " + value + " are selected (with index " + index + ")."
      ) ;
      console . log ( object ) ;
    } ,
  } ) ;
} ) ;

マークアップ

div (node) -> ul (list) -> li (item) 。 

 < div class =" autocompleter " id =" autocompleter-1 " >
  < ul class =" autocompleter-list " >
    < li class =" autocompleter-item " > First </ li >
    <!-- ... -->
    < li class =" autocompleter-item " > Last </ li >
  </ ul >
</ div >
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて