jQuery的关闭自动完成列表 [英] Jquery Close autoComplete list
本文介绍了jQuery的关闭自动完成列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下jQuery来显示自动完成列表：
VAR displayNum = 10;
VAR指针= displayNum;功能DelegateSearch（txtBox）
{
$（＃+ txtBox）.attr（占位符，搜索按姓氏）; $（。ajaxcompanyRefreshImage）ATTR（SRC，/images/refresh.jpg）;
$（ajaxcompanyRefreshImage）隐藏（）。 。$（＃+ txtBox）。家长（）找到（'。ajaxcompanyRefreshImage'）点击（函数（）{$（＃+ txtBox）.autocomplete（搜索）;}）; $（＃+ txtBox）.dblclick（函数（）{$（本）.autocomplete（搜索）;}）;
$（＃+ txtBox）.autocomplete（{
改变：函数（事件，UI）{
如果（$（本）.VAL（）==''）{
$（本）。家长（）找到（'ajaxcompanyRefreshImage。'）隐藏（）。
}
}，
关闭：函数（事件，UI）{
返回false;
}，
选择：函数（事件，UI）{
变种ADDR = ui.item.value.split（' - '）; 变种标签=地址[0];
VAR值=地址[1];
值+ =地址[2]; 如果（标签== NULL ||标签[1] == NULL ||（label.length＆LT; 1安培;＆安培;价值==''和;＆安培; value.length＆LT; 1））{ $（本）.autocomplete（选项，readyforClose，FALSE）;
}
其他{
如果（值[1]！= 0）{
$（本）.autocomplete（选项，readyforClose，真正的）;
delegateSearchPostBack（值，标签，txtBox）;
} }
返回false;
}，
回应：函数（事件，UI）{ VAR更多= {标签：＆LT; B＆GT;＆LT; A HREF =JavaScript的：showmoreNames（）;' ID ='相册更多>>'＆gt;显示更多的名字...＆LT; / A＆GT;＆LT; / B＆gt;中，值：''};
ui.content.splice（ui.content.length，0，更多）;
}，
打开：函数（事件，UI）{ showmoreNames（）;
}，
搜索：函数（事件，UI）{
如果（$（本）.VAL（）长度LT; 3）{
$（本）。家长（）找到（'ajaxcompanyRefreshImage。'）隐藏（）。
返回false;
}
$（UI菜单项），删除（）; }，
来源：函数（请求，响应）{
$阿贾克斯（{
网址：/ajax/ajaxservice.asmx/GetDelegateListBySearch
数据：{prefixText：+'+ request.term +'}，
数据类型：JSON
键入：POST，
的contentType：应用/ JSON的;字符集= UTF-8，
dataFilter：功能（数据）{
返回的数据; }，
的minLength：2，
成功：功能（数据）{
指针= displayNum;
响应（$。图（data.d，功能（VAL，键）{
返回{
标签：DelegateSearchMenulayout（KEY，VAL）
值：VAL
};
}））; }，
错误：功能（XMLHtt prequest，textStatus，errorThrown）{}
}）;
} }）;
}功能DelegateSearchMenulayout（KEY，VAL）{VAR净='';
变种的UserData = val.split（' - '）;VAR表=＆LT;表格的宽度= 350像素风格='下边框风格：固体;'类='menutable'＆gt;中;
表+ =＆所述; TR＆GT;百分位宽度='300像素'＆GT;＆下; /第i;
表+ =＆LT; TR＆GT;＆LT; TD＆GT;＆LT; B＆gt;中+的UserData [1] ++的UserData [2] +＆下; / B个;＆下; / TD＆GT;＆下; / TR＆gt;中;
表+ =＆LT; TR＆GT;＆LT; TD＆gt;中+的UserData [4] + - +的UserData [3] +＆下; / TD＆GT;＆下; / TR＆gt;中;
表+ =＆LT; /表＆gt;， 返回表;
}功能delegateSearchPostBack（用户名，用户id，txtBox）{
$（＃+ txtBox）.autocomplete（消灭）;
$（＃+ txtBox）.VAL（用户ID + - +用户名）;
指针= displayNum;
__doPostBack（txtBox，）;
}功能showmoreNames（）{
$（。menutable）。每个（函数（指数）{
如果（索引＆gt; =指针）{
$（本）.parent（）隐藏（）。
}
其他{
$（本）.parent（）显示（）;
}
}）;如果（$（menutable）长度LT; =指针）{
$（＃相册更多>>），ATTR（的href，JavaScript的：函数（）{返回false;}）。
$（＃相册更多>>），文字（用户结束）。
}
否则指针+ = displayNum;
}
它显示10名默认情况下。如果列表较长，显示更多的名称显示在点击其中，显示10多个名称。随着最初的10名，JQuery的工作perfect.When我点击外部或按Esc键，名称的列表中消失。但具有较长的列表中，当我点击显示其他名称，会显示一个较长的名单，但是，ESC的点击或单击列表外，它不会消失！我怎样才能使这项工作？
我尝试以下解决方案：
<一href=\"http://stackoverflow.com/questions/8182559/how-to-make-the-dropdown-autocomplete-to-disappear-onblur-or-click-outside-in-jq\">how使下拉自动完成消失的onblur或jQuery的点击之外？
但这种解决方案，列表中消失当我点击显示更多！
解决方案
的$（document）.bind（'点击'，功能（事件）{
//检查如果我们没有在搜索框中点击
如果（！（$（event.target）。家长（）。andSelf（）是（'＃相册更多>>'）））{
$（UI菜单项），删除（）;
}
}）;
以上的工作。我没有对文件进行额外的检查点击选项显示更多是否被点击。在具有ID ='相册更多>>。如果用户不点击它因此检查。
I have the following JQuery to display an autocomplete list:
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;
}
It displays 10 names by default. If the list is longer, "Show more names" is displayed on click of which,10 more names are displayed. With the initial 10 names, the JQuery works perfect.When I click outside or hit ESC, the list of names disappears. But with a longer list, when I click on Show More Names, a longer list is displayed but on click of ESC or clicking outside the list, it does not disappear! How can I make this work? I tried the following solution: how to make the dropdown autocomplete to disappear onblur or click outside in jquery? But with this solution, the list disappears when I click on Show More!
解决方案
$(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();
}
});
The above worked. I did an additional check on document click whether the option 'Show More' is clicked. The has id= 'showmore'. Hence checking if user did not click on it.
这篇关于jQuery的关闭自动完成列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
