Question

目前正在尝试在客户网站上实施自动填充功能，以搜索产品和文本页面。为此，我创建了一个通用处理程序，它将匿名对象作为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);
};

Answer 1

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

您的source-property不应该是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 );
};

找到正确的样本here（来源）和here（自定义显示）。

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

使用ashx进行jQuery UI自动完成

1 个答案: