1

現在、商品やテキストページを検索するクライアントのウェブサイトにオートコンプリートを実装しようとしています。このために、匿名オブジェクトをJSONとして返すジェネリックハンドラーを作成しました。私の匿名オブジェクトは次のようになります。

new
{
    Name = product.Name,
    Url = product.Url,
    ImageUrl = imageUrl
});

オブジェクトのリストは、標準の.NETJavascriptSerializerでシリアル化されます。

そして私のJavaScriptは次のようになります：

searchField.autocomplete({
    source: "/handlers/SearchHandler.ashx",        
    response: function (event, ui) {
        ...
    }
});

ただし、JSONからオートコンプリートドロップダウンボックスに値を取得することに関しては、少し行き詰まっています。また、結果をリンクとして使用したいので、ユーザーがドロップダウンで結果をクリックすると、ページ/製品にリダイレクトされます。

誰かがこれを達成する方法を知っていますか？

解決：

searchField.autocomplete({
    source: "/handlers/SearchHandler.ashx?nodeId=" + currentNodeId,
    search: function (event, ui) {
        searchField.css("background-image", "url('../img/ajax-loader-small.gif')");
    },
    response: function (event, ui) {                        
        searchField.css("background-image", "");
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {    
        return $("<li>")
            .data("ui-autocomplete-item", item)
            .append("<a href='" + item.Url + "'>" + item.Name + "</a>")
            .appendTo(ul);
};
4

1 に答える 1

2

動的な目的で静的ソースのサンプルを使用しようとしています。

ソースプロパティは、urlではなく、function：である必要があります。

.autocomplete({
    source: function( request, response ) {
        $.getJSON( "/handlers/SearchHandler.ashx", {
            term: extractLast( request.term )
        }, response );
    }, ...
}) 
.data( "autocomplete" )._renderItem = function( ul, product ) {
    return $( "<li>" )
        .append( "<a href=" + product.Url + ">" + product.Name + "</a>" )
        .appendTo( ul );
};

正しいサンプルはここ（ソース）とここ（カスタム表示）にあります。

コメントに基づいて、製品の応答を処理するようにレンダリングのみを変更します（2番目のリンクを参照）。

于 2013-01-27T21:45:21.770 に答える