65

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

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

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

4

6 に答える 6

128

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

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

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

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

コード例:

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

実際のデモ: http://jsbin.com/ezifi

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

代替テキスト

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

また、オートコンプリート プラグインの結果をカスタム形式にするにはどうすればよいですか?も参照してください。

于 2010-03-08T21:59:14.587 に答える
6

jsbin.comを紹介するためのthxcheeso、

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

  $("#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」と入力します

于 2010-03-08T23:45:27.733 に答える
6

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, ]
};
于 2010-03-04T21:02:28.863 に答える
3

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

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

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

于 2011-08-16T17:07:52.327 に答える
0

オートコンプリートに入力するデータはどこから取得していますか? データベースからですか？その場合、クエリで必要なことを実行して、各単語の先頭 (名/姓) に一致する結果のみを返すことができます。

于 2010-03-08T16:29:23.180 に答える
0

オプションで各項目の先頭だけを検索する別の jQuery オートコンプリート プラグインがあります (オプションはmatchContains=falseです。これもデフォルトだと思います)。

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

于 2010-03-08T15:22:18.360 に答える