Как обнаружить щелчок вне автозаполнения

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, автозаполнение исчезает. Но с набором результатов, содержащим более 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();