如何在按下 Enter Jquery-UI 自动完成时触发点击事件答案

【问题标题】：How to fire click event on pressing enter Jquery-UI autocomplete如何在按下 Enter Jquery-UI 自动完成时触发点击事件
【发布时间】：2012-11-16 11:48:24
【问题描述】：

我有以下JS：

  $("#search").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/GetCompanyNames",
                    dataType: "json",
                    data: "searchterm=" + request.term,
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.Name,
                                value: item.Name,
                                LogoUrl: item.LogoUrl,
                                InternetName :item.InternetName,
                                Name: item.Name
                            };
                        }));
                    }
                });
            },
          minLength: 1
        }).data("autocomplete")._renderItem = function (ul, item) {
            var innerHtml = '<a href=/Store/'+item.InternetName+'><div class="list_item_container" style="height: 60px;"><div class="image" style="float: left; margin-right: 35px;"><img src="' + item.LogoUrl + '"></div><div class="label">' + item.Name + '</div></div></a>';
            return $("<li></li>")
        .data("item.autocomplete", item)
        .append(innerHtml)
        .appendTo(ul);
        };

    });

渲染这个

这是一个建议下拉菜单，当我在文本框中输入任何字符时显示，例如 ib 在这种情况下，
一切正常，但是当我用鼠标单击下拉列表的任何项目时只有一个问题，它会将我带到写在其锚标记中的 url，我希望如果我向下滚动并在某些项目上按 enter 它会做当前，当我在下拉项目上按 Enter 时，它什么也没做。

【问题讨论】：

点击一个项目是什么意思？

标签： javascript jquery jquery-ui jquery-events jquery-ui-autocomplete

【解决方案1】：

看看这个jqFAQ.com 主题，这将帮助您导航到通过鼠标单击和按 Enter 进行的选择的 url。还有一些与自动完成相关的常见问题解答。

【讨论】：

【解决方案2】：

尝试将keyup 处理程序添加到返回的列表项中的a 元素。您应该可以通过修改 _renderItem 函数来做到这一点：

._renderItem = function (ul, item) {
    var div = $('<div />'), //building using DOM elements, rather than HTML string.
        liContainer = div.clone().addClass('list_item_container').css('height', '60px'),
        img = $('<img />').attr('src', item.LogoUrl),
        imgContainer = div.clone().addClass('image').css({
            "float": "left",
            "margin-right": "35px"
        }),
        divLabel = div.clone().addClass('label').text(item.Name),
        a = $('<a />').attr('href', '/Store/' + item.InternetName);
        imgContainer.append(img);
        liContainer.append(imgContainer).append(divLabel);
        a.append(liContainer);
        a.on('keyup', function (e) { //add keyup handler to navigate to new URL on [Enter]
            if (e.which === 13) {
                window.location.href = $(this).attr('href');
            }
        });
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(a)
        .appendTo(ul);
};

【讨论】：