javascript - Jquery 关闭自动完成列表

Question

我有以下 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 : "<b><a href='javascript:showmoreNames();' id='showmore'>Show more Names...</a></b>", 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 width=350px' style='border-bottom-style:solid;' class='menutable'>";
table += "<tr><th width='300px'></th>";
table += "<tr><td><b>" + userData[1] + "" + userData[2] + "</b></td></tr>";
table += "<tr><td>" + userData[4] + " - " + userData[3] + "</td></tr>";
       table += "</table>";

    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 或单击列表外部时，它不会消失!我怎样才能使这项工作？我尝试了以下解决方案: how to make the dropdown autocomplete to disappear onblur or click outside in jquery?但是使用此解决方案，当我单击“显示更多”时列表会消失!

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'。因此检查用户是否没有点击它。