1

目前正在尝试在搜索产品和文本页面的客户网站上实现自动完成功能。为此，我制作了一个通用处理程序，它以 JSON 形式返回匿名对象。我的匿名对象如下所示：

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

对象列表使用标准的 .NET JavascriptSerializer 进行序列化。

我的 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

您正在尝试将示例用于静态源以实现动态目的。

您的源属性不应该是 a url，而是 a 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 );
};

正确的示例可在此处（来源）和此处（自定义显示）找到。

根据评论，仅更改您的渲染以处理您的产品响应（请参阅第二个链接）。

于 2013-01-27T21:45:21.770 回答