Javascript 如何关闭侧面单击的“自动完成”下拉列表
我使用jquery autocomplete获取一些结果并显示结果,但当我单击侧面时,无法关闭带有返回结果的下拉列表Javascript 如何关闭侧面单击的“自动完成”下拉列表,javascript,jquery,jquery-ui,jquery-plugins,jquery-autocomplete,Javascript,Jquery,Jquery Ui,Jquery Plugins,Jquery Autocomplete,我使用jquery autocomplete获取一些结果并显示结果,但当我单击侧面时,无法关闭带有返回结果的下拉列表 $(function () { $("#search").autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("TestAuto
$(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);
};
});
仅从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");
}
});
您让我们不知何故对您的实现视而不见,但假设解决方案是一种良好的模式,那么每次单击文档时都会检测是否单击了元素e.target在搜索中,否则请关闭搜索框
$(document).on('click', function(e)
{
var jqTarget = $(e.target);
if ( !jqTarget.closest('#search').length )
{
$("#search").hide();
}
});
非常愚蠢的错误
应该是
$(".search").autocomplete({...
它可以工作。您能在JSFIDLE中复制它供我们使用吗?默认情况下,autocomplete具有此功能。您使用的是什么版本的jquery和jquery ui?如果你能在一段时间内重新产生问题,那么帮助你就容易多了。
$("#search").autocomplete({...
$(".search").autocomplete({...