Jquery Закрыть Autocomplete список

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? Но с этим решением список исчезает, когда я нажимаю на 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();    
     } 
    }); 

Выше работал. Я сделал дополнительную проверку документа, щелкнув по кнопке «Показать больше». Имеет id = 'showmore'. Следовательно, проверяйте, не нажимал ли пользователь на него.