jQuery UI 自动完成（Autocomplete）在项目开发中的使用记录
jQuery UI 自动完成（Autocomplete）在项目开发中的使用记录
1、加载一个数据源列表包含ID 和Name，
var JSON = [
{ label: "C# Language", value: "C#", id: "1" },
{ label: "C++ Language", value: "C++", id: "2" },
{ label: "Java Language", value: "Java", id: "3" },
{ label: "JavaScript Language", value: "JavaScript", id: "4" },
{ label: "ASP.NET", value: "ASP.NET", id: "5" },
{ label: "JSP", value: "JSP", id: "6" },
{ label: "PHP", value: "PHP", id: "7" },
{ label: "Python", value: "Python", id: "8" },
{ label: "Ruby", value: "Ruby", id: "9" }
];
2、根据输入的Name获取该项的ID
//选择后增加一个属性值来存第三个id
$(this).attr("data-id", ui.item.id);//为了获取到这个控件的id值多增加一个data-id属性
3、每次输入搜索的值为下拉列表添加一个 其他 选项
//匹配用户输入的条目,最后增加一个其他项
response: function (event, ui) {
var obj= {
label: '其他',
value: '其他',
id: '10'
};
ui.content.push(obj);
}
4、文本框获取焦点时得到显示列表
.focus(function () {
$(this).autocomplete("search");//autocomplete 获取焦点时得到显示列表
});
完整的Jquery代码如下：
$("#auto").autocomplete({
autoFocus: false,//如果设置为 true，当菜单显示时，第一个条目将自动获得焦点。
delay:0,//按键和执行搜索之间的延迟，以毫秒计。
minLength: 0,//执行搜索前用户必须输入的最小字符数。对于仅带有几项条目的本地数据，通常设置为零，
source: JSON,//定义要使用的数据
//匹配用户输入的条目,最后增加一个其他项
response: function (event, ui) {
var link = {
label: '其他',
value: '其他',
id: '10'
};
ui.content.push(link);
},
focus: function (e, ui) {
$("#auto").val(ui.item.label);
return false;
},
select: function (e, ui) {
$("#SKU").val();
//alert(ui.item.value);
$(this).value = ui.item.label;
//选择后增加一个属性值来存第三个id
$(this).attr("data-id", ui.item.id);//为了获取到这个控件的id值多增加一个data-id属性
return false;
}
}).focus(function () {
$(this).autocomplete("search");//autocomplete 获取焦点时得到显示列表
});