Question

我对这个问题感到困惑，我已经开始工作了几个小时，在建议列表中点击某个项目时，尝试将jQuery自动完成功能转到网站上的另一个页面。

任何人都知道如何做到这一点？这是我的代码：

$(':input[data-autocomplete]').autocomplete({
    source: $(':input[data-autocomplete]').attr("data-autocomplete"),
    delay: 0,
    select: function (event, item) {
        //window.location.replace("http://www.example.com/Profile/Details/1");// Works but totally unacceptable, browser history lost etc.. 
        //alert("Item Clicked"); //Fires Ok
    }
}).data("autocomplete")._renderItem = function (ul, item) {
    var MyHtml = '<a id="ItemUrl" href="/Profile/Details/' + item.PartyId + '"' + ">" +
                     "<div class='ac' >" +
                     "<div class='ac_img_wrap' >" +
                     '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' +
                     "</div>" +
                     "<div class='ac_mid' >" +
                     "<div class='ac_name' >" + item.value + "</div>" +
                     "<div class='ac_info' >" + item.info + " PartyId :" + item.PartyId + "</div>" +
                     "</div>" +
                     "</div>" +
                     "</a>";
    return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul);
};

正如您所看到的，我在_renderItem事件中使用了自定义HTML，我的自定义HTML会创建一个锚标记，其ID从源传入，这看起来不错，链接在浏览器底部正确形成左角（我正在使用Chrome）

<a href='/Profile/Details/id' >some other divs & stuff</a>

问题是，当我点击链接没有任何反应时，我尝试使用select事件，但item为null，因此无法让item.PartyId强制手动跳转。

如何让点击事件有效？

Answer 1

要回答它可能会迟到，但我已使用以下代码完成此操作：

$(document).ready(function() {
    $('#txtSearch').autocomplete({
        minLength: 3,
        source: "handlers/SearchAutoComplete.ashx?loc=" + $('#hfLocation').val(),
        select: function(event, ui) {
            doSearch(ui.item.label, ui.item.city);
        }
    });
});

function doSearch(term, location) {
    window.location.href = 'Search.aspx?q=' + term + '&loc=' + location;
}

Answer 2

经过几天的敲击（不是那种人），我想出了以下内容：

$(':input[data-autocomplete]').autocomplete({
    source: $(':input[data-autocomplete]').attr("data-autocomplete"),
    delay: 0,
    select: function (event, ui) {
        var q = ui.item.PartyId;
        if (q != "") {
            $('#hidPID').val(q);
            $('#ac_submit').trigger('click');
        }
    }).data("autocomplete")._renderItem // -->>> the rest of the code same as above

问题是（event，item）应该是（event，ui）并获取你使用的项目的值ui.item.PartyId（在我的情况下，PartyId在源代码中声明：上面）

所以在我的原始表格上，我有两个html输入1-hidden ID，2-Submit＆amp;正如您在上面的select：函数中看到的那样，我设置了ID＆amp;触发提交（所以现在用户只需选择一个项目然后关闭它们就会转到执行RedirectToView的控制器而不是这个代码，因为在这个实例中使用位置似乎不正确）

我希望这可以节省一些时间，因为jQuery自动完成文档不会太清楚。

如何使用jQuery自动完成项目单击重定向到另一个页面

2 个答案: