Autocomplete控件实现文本框的自动填充和关联填充

前言

本文要实现的效果是在文本框中输入个别字母或者汉字的时候，可以从数据中模糊查询将符合条件的数据查询出来，使得文本框在使用过程中更加人性化，大大的为用户提供方便。
通过AutoComplete控件可以实现这一功能。

---

实现效果如下图所示：下面案例可供参考

1. 引入js文件和css文件

<script src="jquery.autocomplete/jquery.autocomplete.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.autocomplete/browser.js" type="text/javascript" charset="utf-8"></script>
<link href="jquery.autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

2. 定义数组，里边存放要查询的数据

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" }
			];

3. 使用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);
				}
			});

4. 页面input文本框

form action="" method="get" autocomplete="on">

	<div>

        <h2>个人信息:</h2>

        <span style="color:red;margin:3px;">姓名：</span><input type="text" id="name" />

		<span style="color:blue;margin:3px;">姓别：</span><input type='text'  name="sex"  id='sex' value='' class='form-control' />

		<span style="color:blue;margin:3px;">联系电话：</span><input type='text'  name="phone"  id='phone' value='' class='form-control' />
                        
    </div>

</form>

写在最后
完整代码下载：文本框的自动填充和关联填充