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个名称。如果列表更长，＆＃34;显示更多名称＆＃34;单击显示时，将显示另外10个名称。使用最初的10个名称，JQuery工作正常。当我点击外部或按ESC时，名称列表将消失。但是如果列表更长，当我单击“显示更多名称”时，会显示更长的列表，但是单击ESC或单击列表外部，它不会消失！我怎样才能做到这一点？我尝试了以下解决方案： how to make the dropdown autocomplete to disappear onblur or click outside in 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();            
        }
    });

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

Jquery关闭autoComplete列表

1 个答案: