jQuery自动完成功能不会在单击项目列表内的按钮时关闭

Question

我正在制作的页面上有一个特殊的设计功能，该功能涉及jQuery自动完成功能，在搜索列表旁边有按钮。我可以通过单击这些按钮来绑定并成功运行事件。问题是我不希望菜单关闭或单击按钮时选择的选项。这是我的代码。

function autocomplete () {
 $(".header-search-box").autocomplete({
    source: function(req,res) {
        $.ajax({
            url: "/localhost:3000/autocomplete/"+req.term,
            dataType: "jsonp",
            type: "GET",
            data: {
                search: req.term
            },
            success: function(data) {
                res(data)
            },
            error: function(xhr) {
                alert(xhr.status + ' : ' + xhr.statusText);
            }
        });
    },
    select: function(event, ui) {
    }
}).data('ui-autocomplete')._renderItem = function(ul,item){
    return $("<li>")
    .append("<div class='entry'><a href='/details/"+item._id+"'><img src='"+item.thumbUri+"' height='64' width='26'></img><div class='details'><div class='make'>"+item.make+"</div><div class='model'>"+item.model+"</div></div></a><div class='add-interest'><button  class='{{#liked}}trash{{/liked}}{{^liked}}like{{/liked}}'><i class='fa {{icon}}'></i></button></div></div>")
    .appendTo(ul);
}

}

任何帮助将不胜感激

Edit：1http://jsfiddle.net/uhLh7/1/拨弄链接到简化版本的代码。Edit：2我使用的是jquery UI版本1.11.0，并且直接从google cdn使用jquery。在jsfiddle中找不到版本...

Answer 1

您可以绑定“ mousedown”事件。这是您的jsfiddle中包含我的更改的代码

$(function () {
    $(document).on('mousedown', '.add-interest button', function () {
      alert("Sorry, I couldn't bring the object names");
      return false;
    });
});

Answer 2

仅取消按钮单击事件的传播，但不是事件本身。这将执行默认的按钮单击事件，但将停止自动完成功能的关闭。在获取数据时，在ajax的成功事件中：

success: function(data) {
    res(data); // Your data handling here
    $('.add-interest button').click(function(event){
        event.stopPropagation(); // Stop further bubbling of this click event
    });
},