web-dev-qa-db-ja.com

jQuery UI Autocompleteウィジェットの検索構成

jQuery UI autocomplete ウィジェットを使用して、名または姓によるユーザー検索を実装することを検討しています。デフォルトでは、オートコンプリートは、Wordでの出現に関係なく、文字シーケンスで単語を検索するように見えます。したがって、javascript, asp, haskellなどのデータがあり、'as'と入力すると、3つすべてが取得されます。 Wordの先頭にのみ一致するようにします。したがって、上記の例では'asp'のみを取得します。これを行うためにオートコンプリートウィジェットを構成する方法はありますか？

最終的には、Gmailのように 姓または名の先頭で一致 の方がさらに良いでしょう。

注：jQuery UIウィジェットを具体的に使用してこれを行う方法を見つけようとしています。私はすでにプロジェクトでjQuery UIを使用しているため、これに固執し、Webアプリケーションに追加のライブラリを追加しないようにします。

jqueryjquery-uijquery-pluginsautocompletejquery-ui-autocomplete
65
dev.e.loper

JQuery UI v1.8rc3では、 オートコンプリートウィジェット は、文字列、配列、またはコールバック関数のいずれかである source オプションを受け入れます。文字列の場合、オートコンプリートはそのURLでGETを実行し、オプション/提案を取得します。配列の場合、オートコンプリートは、指摘したように、配列の任意の位置に入力された文字が存在するかどうかを検索します。最後のバリアントは、コールバック関数です。

オートコンプリートドキュメントから：

3番目のバリエーションであるコールバックは、最も柔軟性が高く、任意のデータソースをオートコンプリートに接続するために使用できます。コールバックは2つの引数を取得します。

•requestオブジェクト。 "term"という単一のプロパティを持ち、現在テキスト入力にある値を参照します。たとえば、ユーザーがオートコンプリートを行うように設定されている都市フィールドに「new yo」と入力すると、_request.term_には「new yo」が保持されます。
•response関数。コールバックで、ユーザーに提示するデータを含む単一の引数が必要です。このデータは、指定された用語に基づいてフィルター処理する必要があり、単純なローカルデータに許可される形式の配列である必要があります。ラベル/値/両方のプロパティを持つString-ArrayまたはObject-Arrayです。

サンプルコード：

_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);への呼び出しescapesエスケープ（-===-）ユーザーが入力したテキスト内の正規表現を意味する用語はプレーンテキスト。たとえば、ドット（。）は正規表現に意味があります。オートコンプリートのソースコードを読むことで、このescapeRegex関数を学びました。
  • new Regexp()を含む行。 ^（Circumflex）で始まる正規表現を指定します。これは、入力した文字が配列内の用語の先頭にある場合にのみ一致することを意味します。また、大文字と小文字を区別しない一致を意味する「i」オプションも使用します。
  • $.grep()ユーティリティは、指定された配列の各用語で指定された関数を呼び出すだけです。この場合の関数は、単純に正規表現を使用して、配列内の用語が入力されたものと一致するかどうかを確認します。
  • 最後に、検索の結果でresponseFn（）が呼び出されます。

動作デモ： http://jsbin.com/ezifi

それはどのようなものか：

alt text

ちょっとした注意：オートコンプリートに関するドキュメントは、この時点ではかなり未熟であることがわかりました。これを行う例は見つかりませんでした。また、どの.cssファイルが必要であるか、どの.cssクラスが使用されるかについての作業ドキュメントを見つけることができませんでした。これをすべてコードを調べて学んだ。

オートコンプリートプラグインの結果をカスタムフォーマットするにはどうすればよいですか もご覧ください。

127
Cheeso

Devbridgeのオートコンプリートを使用します。 http://www.devbridge.com/projects/autocomplete/jquery/

開始文字にのみ一致します。

alt text

姓または名に基づいて一致する限り、姓と名のルックアップリストを提供する必要があります。

使用例：

  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, ]
};
6
Cheeso

jsbin.comを導入するためのthx cheeso

姓と名の一致もサポートするようにコードを拡張しました。

  $("#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/

「an」または「re」と入力します

5
Phil Rykoff

文字列内の各Wordの先頭を検索する場合、ヘンチマンのよりエレガントな解決策は、cheesoを使用するだけで、正規表現のWord境界特殊文字を使用することです。

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

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

2
Nader

オートコンプリートに入力するデータをどこで入手していますか？データベースからですか？その場合、クエリで必要な処理を実行し、各Wordの先頭（姓/名）に一致する結果のみを返すことができます

0
Mark

別のjQueryオートコンプリートプラグイン があり、オプションで各アイテムの先頭でのみ検索します（オプションは matchContains=false 、これもデフォルトだと思います）。

JQuery UIプラグインにこのようなオプションがないため、別のプラグインを使用するか、現在使用しているプラ​​グインを書き換える必要があると思います。

0
Paul D. Waite