1

現在 Prototype+Scriptaculous のAjax.Autocompleteを使用しているサイトで作業しています。現時点では問題なく動作しますが、jQuery に変換する必要があります。

jQueryUIにAutocompleteがあることは知っていますが、既存の外部 URL を変更せずに使用する方法があるかどうかはわかりません。

Scriptaculous の Ajax.Autocomplete を使用すると、非常に簡単になります。

new Ajax.Autocompleter('inputID', 'destinationID', 'search.php', {
    paramName: 'q',
    minChars: 2,
    frequency: 0.4,
    indicator: 'loading'
    });

ほとんど一目瞭然です: inputIDは の ID <input>、destinationIDは結果を表示する要素です。search.phpは、データベースから結果を返すページです。リストに表示する HTML を含みます。 .

残りのオプションはかなり明白なはずです:)

search.php?q=search-query現在は、次のようなきれいにフォーマットされた HTML を返します。

<ul>
    <li id="ID">Result</li>
    <li id="ID">Result</li>
    <li id="ID">Result</li>
</ul>

これをjQueryUIオートコンプリートで使用できれば素晴らしいのですが、それが可能かどうかはわかりません(可能な場合は、その方法もわかりません)。

jQueryUI のオートコンプリートの使用に関する一連のチュートリアルを見てきましたが、それらはすべて、Javascript 配列 (データベース内で検索するレコードが何千もあるため、私には役に立たない) または JSON (これはできれば避けたいと思っています。）

それはできますか？

4

3 に答える 3

1

編集:手動jQuery

このコードを試してみてください。私はテストしていないので、1 つまたは 2 つのバグがある可能性があります。また、これは /search.php が同じドメインにあることを前提としています。必要に応じて設定の値を編集します

$(関数 () {

   var debounce;

   var settings = {
       input: '#inputID',
       dest: '#destID',
       url: '/search.php?q=',
       minLength: 2,
       debounceDelay: 200
   }

   $(settings.input).on('keyup', function () {
       var q = this.value;

       if (debounce) clearTimeout(debounce);

       if (q && q.length >= settings.minLength)
       {
           debounce = setTimeout(function () {doSearch(q);},
                                 settings.debounceDelay);
       }

   });

   $(settings.dest).on("click", "li", function (e) {
       $(settings.input).val($(this).text());
       $(settings.dest).empty();
   })

   function doSearch(query) {
       $(settings.dest).load(settings.url + query);
   };

});

JSON アプローチ

最近リリースされたばかりの twitter の typeahead を見てください。(ブートストラップの先行入力と混同しないでください。これは完全にスタンドアロンであり、jquery のみが必要です)

http://twitter.github.com/typeahead.js/

Google の検索ボックスと同じように動作します

  • オートコンプリート
  • 自動提案
  • キーボードのサポート
  • ローカルとリモートの両方の複数のソース
  • 結果のキャッシュ (localStorage) とリクエストのスロットリング
  • テンプレートのサポート ( Hoganなど、口ひげと互換性のあるテンプレート エンジンが必要です)

使用方法について説明が必要な場合は、以下の例またはコメントを確認してください

于 2013-03-06T17:42:40.853 に答える
1

JSONを出力したくないので、これを試してください：

var aclist = [];
$('input#myauto').autocomplete({
  source: aclist,
  change: function( event, ui ) {
              $.ajax({
                  url: 'search.php',
                  data: {
                      'inputID': inputID,
                      'destinationID': destinationID
                  },
                  dataType: 'html',
                  success: function (html) {
                      aclist = [];
                      $('li', html).each(function () {
                          aclist.push({
                              value: this.id,
                              label: $(this).text()
                          });
                      });
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      aclist = [];
                  }
              });
  }
});

私はそれをデバッグしていませんが、本質的には ajax 呼び出しを onChange イベントにリンクし、その呼び出しによって返された html を適切な形式の配列に変換するという考えです。

于 2013-03-06T18:34:50.857 に答える
0

Jqueryオートコンプリートを使用して関数をソースとして使用し、その関数でajax呼び出しを行い、スクリプトからhtmlを解析してJavaScript配列に変換できます

オートコンプリート ソース プロパティの jquery ドキュメントをご覧ください http://api.jqueryui.com/autocomplete/#option-source

于 2013-03-06T18:40:17.663 に答える