Jquery Close autoComplete list

问题

I have the following JQuery to display an autocomplete list:

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

It displays 10 names by default. If the list is longer, "Show more names" is displayed on click of which,10 more names are displayed. With the initial 10 names, the JQuery works perfect.When I click outside or hit ESC, the list of names disappears. But with a longer list, when I click on Show More Names, a longer list is displayed but on click of ESC or clicking outside the list, it does not disappear! How can I make this work? I tried the following solution: how to make the dropdown autocomplete to disappear onblur or click outside in jquery? But with this solution, the list disappears when I click on Show More!

回答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();            
        }
    });

The above worked. I did an additional check on document click whether the option 'Show More' is clicked. The has id= 'showmore'. Hence checking if user did not click on it.

来源：https://stackoverflow.com/questions/29020199/jquery-close-autocomplete-list