0

オートコンプリートプラグインを使用して、 IMDBにあるような検索ボックスを作成しようとしています。

  • オプションにテキスト以上のものを表示します。
  • オプションが選択されたときにリンクのように機能するため（各オプションは一意のレコードになるため）。
  • つまり、ユーザーが選択した場合、ボタンを押すと、入力に対して検索が実行されます。

ドキュメントによると、動作するデータソースには3つのタイプがあります。

データソースは次のとおりです。

ローカルデータを含む配列
文字列、URLを指定する
コールバック

オートコンプリートを2番目のオプションで機能させることはできますが、返されたデータを変換する機能はありません。JSONを取得して、ドロップダウンに直接配置します。これは、ソースURLがデータを返すことができるのはの形式のみであることを意味します{label: "blah", value: "blurg"}。

変換関数を挿入できれば、URLに好きなJSONを返すことができます。この関数は、データをオートコンプリートが期待する形式に変更するだけでなく、希望どおりにフォーマットします。すべて、URLによって提供される応答を変更する必要はありません（そこからHTMLを返すのではなく、JSONのみを返します）。

たとえば、URLはこれを返す可能性があります：

{ label:"Grosse Point Blank", id: 3, img:"/imgs/gpb.png",...}

そして、変換関数はそれを次のようなものに変えることができます：

{ label:"<a href='/films/3/grosse-point-blank'><img src='/imgs/gpb.png' />Grosse Point Blank</a>", value="grosse-point-blank"}

オプション3、コールバック、コールを使用してみましたが、機能しgetJSONません。私が見つけた最も近いコードはここにありますが、オートコンプリートの現在のドキュメントにリストされていないオプションがあり、応答オブジェクトの使用方法がわかりません。

AJAXリクエストでコールバックメソッドを使用する例、またはコードを変換する関数を挿入する方法を誰かが知っているなら、私は非常に感謝しています。

洞察や助けは大歓迎です。

4

2 に答える 2

1

_renderItem()オートコンプリートのプライベート メソッドを使用して、返されるデータをフォーマットできます。次のようになります。

$("#element").autocomplete({...}).data( "autocomplete" )._renderItem = function( ul, item ) {
    //...
};

ここでメソッド定義を見ることができますhttps://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js#L520

私が使用したコードの例:

$("#element").autocomplete({...})
.data("autocomplete")._renderItem = function( ul, item ) {
    return $( "<li></li>" ) // create the list item
        .data( "item.autocomplete", item ) // save the data to the DOM
        .append( "<a>"+ item.label + "</a>" ) // add the HTML
        .appendTo( ul ); // append to the UL
};
于 2012-10-04T15:33:46.440 に答える
1

コールバック メソッドを使用する場合の簡単な構造を次に示します。

  source: function( request, response ) {
    $.ajax({
      ...
      success: function( data ) {
        // do transformation of data here
        response(data);          
      }
    });
  }

リンクから引用http://api.jqueryui.com/autocomplete/#option-source

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

テキスト入力の現在の値を参照する「term」と呼ばれる単一のプロパティを持つリクエストオブジェクト。たとえば、ユーザーが都市フィールドに「new yo」と入力すると、オートコンプリートの用語は「new yo」になります。

ユーザーに提案するデータが 1 つの引数に含まれていることを期待する応答コールバック。このデータは、提供された用語に基づいてフィルタリングする必要があり、上記の単純なローカル データの任意の形式 (ラベル/値/両方のプロパティを持つ文字列配列またはオブジェクト配列) にすることができます。リクエスト中のエラーを処理するカスタム ソース コールバックを提供する場合に重要です。エラーが発生した場合でも、常に応答コールバックを呼び出す必要があります。これにより、ウィジェットが常に正しい状態になることが保証されます。

于 2012-10-04T15:41:01.517 に答える