jQuery UIオートコンプリートウィジェットを検索設定

StackOverflow https://stackoverflow.com/questions/2382497

質問

いの jQuery UIオートコンプリート ウィジェットをユーザーのルックアップによる最初または最後の名前です。このように見えるデフォルトのオートコンプリートを見る言葉による文字シーケンスにな発生ます。その場所にデータなど javascript, asp, haskell やすタイプ 'as' について一覧を取得します。うみ合の言葉です。で上記の例ではすみ 'asp'.があるので、設定のオートコンプリートウィジェットするのか？

最終的にはそうでも良いの 一致するかの最初または最後の名前 ではGmail.

注意：私はそうとしていることを、いつこのjQuery UIウィジェットに注目する必要があると主張した。今では、jQuery UIの私のプロジェクトというそうしていくべきであるにならないように注意しましょ追加図書館が私のサポートも組み込まれています。

役に立ちましたか？

解決

では、jQuery UI v1.8rc3, のオートコンプリートウィジェット を受け入れ 源 オプションでなければならないと規定されて、文字列の配列、またはコールバック関数。の場合は、文字列のオートコンプリートは、取得したURLをオプション/ご提案します。場合には配列内のオートコンプリートが検索では、ご指摘の通り、存在感の文字の位置はその配列になります。最終的なvariantが欲しいものにコールバック関数。

からの自動補完のドキュメンテーション

第変動のコールバックは、最も柔軟性、接続するときに使用されるデータソースのオートコンプリート.コールバックが二つの引数:

※ request オブジェクトは、単一性という"期間"の値を現在のテキスト入力します。例えば、ユーザが入力した"新しいヨーヨー"の市場設定したいオートコンプリート、 request.term 開催"新しいヨーヨー".
※ response 機能コールバックする期待の単一の引数を含むデータになることをお勧めします。このデータをフィルタに基づき当期は、配列形式の許可を簡単にデータ:文字列配列やオブジェクトレベル値/共にすばらしい物件です。

例コード: 

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({
    // The source option can be an array of terms.  In this case, if
    // the typed characters appear in any position in a term, then the
    // term is included in the autocomplete list.
    // The source option can also be a function that performs the search,
    // and calls a response function with the matched entries.
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

重要なポイント：

  • を呼び出 $.ui.autocomplete.escapeRegex(req.term); その エスケープ を検索 その他のregex-正規表現の意味のある条件のテキスト入力により、ユーザとして扱われします。例えば、ドット(.) は意味がありregex.私はこのescapeRegex機能により読みの自動補完のソースコード。
  • は行 new Regexp().で指定regexp始^(Circumflexることで試合の場合のみ入力のキャラクターが当期の配列があります。また、"i"オプションとは大文字小文字を区別しない。
  • の $.grep() ユーで通話を提供機能を毎期の支配列になります。機能この場合にだけ使用の正規表現が期配列の一致のために何を入力.
  • 最後に、responseFn()呼び出しの結果により検索します。

作業のデモ: http://jsbin.com/ezifi

その次のように記述されています。

alt text

ただ注意:だから、その文書のオートコンプリートするか未熟である。なかった例を見たことが見出せなかったので作docる.cssファイルが必要であったたえてしまいます。cssクラスを使うことにします。私はこれから検証します。

も参照にしてください。 たいのですがカスタム-フォーマットのオートコンプリートプラグインが多かった。

他のヒント

私はdevbridgeからオートコンプリートを使用します。 http://www.devbridge.com/projects/autocomplete/jquery/する

それだけで、開始文字に一致します。

の

限り姓または名前に基づいてマッチングなど、あなただけの最初と最後の名前で検索リストを指定する必要があると思います。

使用例：

  var wordlist = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November',
      'December' ]; 

      var acOptions = {
          minChars:2,
          delimiter: /(,|;)\s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 10, // miliseconds

          // callback function:
          onSelect: function(value, data){
              //$('#input1').autocomplete(acOptions);
              if (typeof data == "undefined") {
                  alert('You selected: ' + value );
              }else {
                  alert('You selected: ' + value + ', ' + data);
              }
          },

          // local autosuggest options:
          lookup: wordlist
      };

あなたは自動補完コントロールを初期化するために渡すことlookupオプションは、リスト、またはオブジェクトにすることができます。上記の単純なリストを示しました。

：あなたが返さ取得の提案に添付いくつかのデータが必要な場合は、このように、lookupオプションオブジェクトを作ります 
var lookuplist = {
    suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
    data :         [ 31, 28, 31, 30, 31, ]
};

THX cheeso intrducingためjsbin.com、

私も、一次および姓の一致をサポートするために、あなたのコードを拡張します。

  $("#input1").autocomplete({
      source: function(req, responseFn) {
          addMessage("search on: '" + req.term + "'<br/>");

          var matches = new Array();
          var needle = req.term.toLowerCase();

          var len = wordlist.length;
          for(i = 0; i < len; ++i)
          {
              var haystack = wordlist[i].toLowerCase();
              if(haystack.indexOf(needle) == 0 ||
                 haystack.indexOf(" " + needle) != -1)
              {
                  matches.push(wordlist[i]);
              }
          }

          addMessage("Result: " + matches.length + " items<br/>");
          responseFn( matches );
      }
  });

デモ： http://jsbin.com/ufimu3/する

型 '' または '再'

：あなたは文字列の各単語の先頭を検索したい場合は、

は、子分のよりエレガントな解決策はcheesoのを取るちょうど正規表現の単語境界の特殊文字を使用することです 

var matcher = new RegExp( "\\b" + re, "i" );

例： http://jsbin.com/utojoh/2 の（（BL）を検索してみてください）

あります別のjQueryのオートコンプリートプラグインのことだけで、各の開始時に、必要に応じて検索します項目（オプションは matchContains=false に、私はそれがあまりにもデフォルトだと思います）。

jQueryのUIのプラグインで、このようなオプションが存在しないことを考えると、私はあなたがいずれかの別のプラグインを使用するか、またはあなたが今使っているものを書き換える必要があります推測している。

どこでオートコンプリートを移入するデータを取得していますか？それは、データベースからですか？もしそうなら、あなたはあなたのクエリでやりたいだけ各単語（最初/最後の名前）

の先頭に一致する結果を返すことができます
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top