7

ユーザーが検索ボックスに入力を開始すると、提案ページは、その名前に一致するすべてのコレクションから最新のアイテムとその他のデータを返します。

そのアイテムを（画像とともに）表示したいと思います。また、「このコレクションのすべてのアイテムを見る」へのリンクも表示したいと思います。

私は次のコードでそれを（ほとんど）行うことができます：

$('#search').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: suggesturl,
            dataType: 'json',
            data: request,
            success: function (data) {
                response(data.map(function (value) {
                    return {
                        'label': '<img src="' + value.thumbsmall + '" />' + value.name + '<a href="/">More items from this collection...</a>',
                        'value': value.fullname
                    };  
                }));
            }   
        }); 
    },  
    minLength: 3
})

問題は、リンクがボックスに表示されても、クリックすると無視され、デフォルトのselectアクションが実行されることです (アイテムvalueはテキストボックスに入れられます)。

4

1 に答える 1

6

いくつかのオプションがあるようです。まず、オートコンプリート初期化子の選択オプションを使用して、独自の選択アクションを指定できます。

$(selector).autocomplete({
    source: ... ,
    select: function(value, data){
          if (typeof data == "undefined") {
              emitMessage('You selected: ' + value + "<br/>");
          } else {
              emitMessage('You selected: ' + data.item.value + "<br/>");
          }
    }
});

何らかの理由でそれが十分でない場合は、オートコンプリート リスト用に独自のコンテンツをレンダリングして、必要なだけ制御することができます。
これは、オートコンプリートがリスト内の各項目をレンダリングするために呼び出すものです。方法については、この回答を確認してください。v1.8rc3 で動作します。

_renderItem で clickable をレンダリングし、<span>好きなロジックをクリックイベントに添付できると思います。

そのルートに行く場合は、デフォルトのクリック アクションをオフにする必要があるかもしれません。<a>オートコンプリートは、クリックイベントを提供する要素に を使用していると思います。その場合、そのクリック ハンドラーの設定を解除する必要があります。

于 2010-03-23T04:38:50.037 に答える