클릭하면 자동 완성 드롭 다운을 닫는 방법

Question

사용자 jquery autocomplete 일부 결과를 가져 오려면 결과가 표시되지만 측면을 클릭하면 반환 된 결과와 함께 드롭 다운을 닫을 수 없습니다.

$(function() { 
      $("#search").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: '@Url.Action("TestAutoComplete", "Home")', type: "POST", dataType: "json", 
         data: { query: request.term }, 
         success: function (data) { 
          response($.map(data, function (item) { 

           return { 
            label: item.Title 
           }; 
          })); 
         } 
        }); 
       }, 
       minLength: 1, 
       select: function (event, ui) { 
        onItemSelect(ui.item); 
       }, 
       open: function() { 
        $(this).removeClass('ui-corner-all').addClass('ui-corner-top'); 
        $(this).autocomplete('widget').css('z-index', 999999); 
       }, 
       close: function() { 
        $(this).removeClass('ui-corner-top').addClass('ui-corner-all'); 
       } 
      }) 
     .data('ui-autocomplete')._renderItem = function (ul, item) { 
      return $('<li>') 
       .data('autocomplete-item', item) 
       .append('<a href="#"><p >' + item.label + "</p></a>") 
       .appendTo(ul); 
     }; 
     }); 

Answer 1

아주 바보 같은 오류가 발생했습니다.

$("#search").autocomplete({... 

는

$(".search").autocomplete({... 

을해야하고 그것은 작동합니다.

Answer 2

마크 업 그냥 JS보고에서 나에게 완전히 명확하지 않다하지만이 같은 것입니다 : 당신은 어떻게 든 구현의 눈을 멀게 우리를 떠나

$("html").on("click.autocomplete", function(e){ 
    var $targ = $(e.target || event.srcElement); 
    if (!$targ.is(/* searchlist */) || !$(/* searchlist */).has($targ).length) { 
    //Close autocomplete 
    $("html").off(".autocomplete"); 
    } 
}); 

Answer 3

하지만, 좋은 가정 패턴은 솔루션이 될 것입니다. 클릭 한 요소 (e.target)가 검색 ​​내에 있으면 문서의 모든 클릭을 감지합니다. 그렇지 않으면 검색 상자를 닫습니다.

$(document).on('click', function(e) 
{ 
    var jqTarget = $(e.target); 
    if (!jqTarget.closest('#search').length) 
    { 
     $("#search").hide(); 
    } 
}); 

Answer 4

var that = $('.autocomplete'); //Define this somewhere in the page to refer later 

$('document').on('mousedown', function(e){ 
if ($(e.target).closest('.autocomplete:not(:visible)').length != 0) { 
     that.hide(); 
    } 
});