Autocomplete控件实现文本框的自动填充和关联填充
前言
本文要实现的效果是在文本框中输入个别字母或者汉字的时候，可以从数据中模糊查询将符合条件的数据查询出来，使得文本框在使用过程中更加人性化，大大的为用户提供方便。
通过AutoComplete控件可以实现这一功能。
实现效果如下图所示：下面案例可供参考
- 引入js文件和css文件
- 定义数组，里边存放要查询的数据
var info = [
{ name: "张三", sex:"男", phone: "15633334444" },
{ name: "李四", sex:"男", phone: "13344445555" },
{ name: "小美", sex:"女", phone: "16833335555" },
{ name: "冰冰", sex:"女", phone: "13700002222" },
{ name: "迪丽热巴", sex:"女", phone: "13088883333" },
{ name: "苏三", sex:"女", phone: "15588880000" },
{ name: "建国", sex:"男", phone: "15244442222" },
{ name: "小花", sex:"女", phone: "18900002222" },
{ name: "菲尔", sex:"男", phone: "16688883333" },
{ name: "大卫", sex:"男", phone: "14488889900" }
];
- 使用autocomplete控件实现查询
$("#name").autocomplete(info, {
max: 10,//列表里的条目数
minChars: 0,//自动完成激活之前填入的最小字符
width: 200,//提示的宽度，溢出隐藏
scrollHeight: 300,//提示的高度，溢出显示滚动条
matchContains: true,//包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
mustMatch:false,
autoFill:true,//自动填充
formatItem: function(row, i, max) {
return row.name;
},
formatMatch: function(row, i, max) {
return row.name ;
},
formatResult: function(row) {
return row.to;
}
}).result(function(event, row, formatted){ //关联出其他信息
if(row == undefined || row.name == undefined ) {
} else {
$("#sex").val(row.sex);
$("#phone").val(row.phone);
}
});
- 页面input文本框
form action="" method="get" autocomplete="on">
个人信息:
姓名：
姓别：
联系电话：
写在最后
完整代码下载：文本框的自动填充和关联填充