Jquery关闭autoComplete列表

我有以下JQuery来显示自动完成列表：

var displayNum = 10; var pointer = displayNum; function DelegateSearch(txtBox) { $("#" + txtBox).attr("placeholder", "Search by Last Name"); $(".ajaxcompanyRefreshImage").attr("src", "/images/refresh.jpg"); $(".ajaxcompanyRefreshImage").hide(); $("#" +txtBox).parents().find('.ajaxcompanyRefreshImage').click(function () { $("#" +txtBox).autocomplete("search"); }); $("#" +txtBox).dblclick(function () { $(this).autocomplete("search"); }); $("#" +txtBox).autocomplete({ change: function (event, ui) { if ($(this).val() == '') { $(this).parents().find('.ajaxcompanyRefreshImage').hide(); } }, close: function (event, ui) { return false; }, select: function (event, ui) { var addr = ui.item.value.split('-'); var label = addr[0]; var value = addr[1]; value += addr[2]; if (label == null || label[1] == null ||(label.length < 1 && value == '' && value.length < 1)) { $(this).autocomplete("option", "readyforClose", false); } else { if (value[1]!= 0) { $(this).autocomplete("option", "readyforClose", true); delegateSearchPostBack(value, label, txtBox); } } return false; }, response: function (event, ui) { var more = { label : "Show more Names...", value: '' }; ui.content.splice(ui.content.length, 0, more); }, open: function(event, ui) { showmoreNames(); }, search : function (event, ui) { if ($(this).val().length < 3) { $(this).parents().find('.ajaxcompanyRefreshImage').hide(); return false; } $(".ui-menu-item").remove(); }, source: function (request, response) { $.ajax({ url: "/ajax/ajaxservice.asmx/GetDelegateListBySearch", data: "{ prefixText: " + "'" +request.term + "'}", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", dataFilter: function (data) { return data; }, minLength: 2, success: function (data) { pointer = displayNum; response($.map(data.d, function (val, key) { return { label: DelegateSearchMenulayout(key, val), value: val }; })); }, error: function (XMLHttpRequest, textStatus, errorThrown) {} }); } }); } function DelegateSearchMenulayout(key, val) { var net = ''; var userData = val.split('-'); var table = ""; table += ""; table += ""; table += ""; table += "
" + userData[1] + "" + userData[2] + "
" + userData[4] + " - " + userData[3] + "
"; return table; } function delegateSearchPostBack(userName, userId, txtBox) { $("#" + txtBox).autocomplete("destroy"); $("#" + txtBox).val(userId +"-" + userName ); pointer = displayNum; __doPostBack(txtBox, ""); } function showmoreNames() { $(".menutable").each(function (index) { if (index >= pointer) { $(this).parent().hide(); } else { $(this).parent().show(); } }); if ($(".menutable").length <= pointer) { $("#showmore").attr("href", "javascript: function () {return false;}"); $("#showmore").text("End of Users"); } else pointer += displayNum; } 

它默认显示10个名称。 如果列表较长，则单击显示“显示更多名称”，将显示另外10个名称。 使用最初的10个名称，JQuery工作正常。当我点击外部或按ESC时，名称列表将消失。 但是使用更长的列表，当我单击“显示更多名称”时，会显示更长的列表，但是单击ESC或单击列表外部，它不会消失！ 我怎样才能做到这一点？ 我尝试了以下解决方案： 如何使下拉列表自动完成消失onblur或在jquery中单击外部？ 但是使用这个解决方案，当我点击Show More时，列表就消失了！

Answer 1

  $(document).bind('click', function (event) { // Check if we have not clicked on the search box if (!($(event.target).parents().andSelf().is('#showmore'))) { $(".ui-menu-item").remove(); } }); 

以上工作。 我对文档进行了额外检查，单击是否单击“显示更多”选项。 有id =’showmore’。 因此检查用户是否没有点击它。