Как закрыть выпадение автозаполнения на стороне нажмите

Question

I пользователь 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(); 
    } 
});