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);
}

}

任何帮助将不胜感激

修改：1
http://jsfiddle.net/uhLh7/1/指向简化版代码的链接。
编辑：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);
    $('.add-interest button').click(function(ev){
        ev.stopPropagation();
    });
},

Jquery自动完成不要在单击项目列表中的按钮时关闭

2 个答案: