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，自动完成功能就会消失。但是如果结果集包含10个以上的名称，当我单击“显示更多名称”时，会显示接下来的10个名称，但是单击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();

如何检测自动完成外的点击

1 个答案: