Jquery 自动完成

仲崇峰

2015-06-02

JSON: JavaScript对象表示法(JavaScript Object Notation)
JSON 是存储和交换文本信息的语法。类似于XML
JSON比XML更小，更快，更易解析
------------------------------------------------------------------------------
例子1
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello Autocomplete</title>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
    <link rel="Stylesheet" href="js/jquery.autocomplete.css" />
    <script type="text/javascript">
        var emails = [
            { name: "Peter Pan", to: "[email protected]" },
            { name: "Molly", to: "[email protected]" },
            { name: "Forneria Marconi", to: "[email protected]" },
            { name: "Master <em>Sync</em>", to: "[email protected]" },
            { name: "Dr. <strong>Tech</strong> de Log", to: "[email protected]" },
            { name: "Don Corleone", to: "[email protected]" },
            { name: "Mc Chick", to: "[email protected]" },
            { name: "Donnie Darko", to: "[email protected]" },
            { name: "Quake The Net", to: "[email protected]" },
            { name: "Dr. Write", to: "[email protected]" },
            { name: "GG Bond", to: "[email protected]" },
            { name: "Zhuzhu Xia", to: "[email protected]" }
        ];

            $(function() {
                $('#keyword').autocomplete(emails, {
                    max: 8, 
                    minChars: 0,
                    width: 400, 
                    scrollHeight: 300,
                    matchContains: true,
                    autoFill: false,
                    formatItem: function(row, i, max) {
                        return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
                    },
                    formatMatch: function(row, i, max) {
                        return row.name + row.to;
                    },
                    formatResult: function(row) {
                        return row.to;
                    }
                }).result(function(event, row, formatted) {
                    alert(row.to);
                });
            });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="keyword" />
        <input id="getValue" value="GetValue" type="button" />
    </div>
    </form>
</body>
</html>

------------------------------------------------------------------------------
例子2
$(function(){
	var url = "../jsonTreeData/issueCustodianDataAction!getIssueCustodian.action";
		$("#issueCustodian").autocomplete(url,{
			max : 30,
			minChars : 0,
			cacheLength : 0,
			width:120,
			mustMatch : true,
			dataType:"json",
			extraParams : {
				"issueCustodian.code" : function(){
					var issueCustCode = $("#issueCustodian").val();
					if(issueCustCode.indexOf("-") != -1){
						issueCustCode = fundCodeValue.split("-")[0];
					}
					return encodeURI(issueCustCode);
				},
				"jsonSerializeParams" : "code;name"
			},
		parse: function(data){
			var rows = [];  
			if(data == null){
				return rows;
			}
			var d = eval("("+data+")");  
			for(var i=0; i<d.length; i++){
			 rows[rows.length] = {
			   data:d[i], //每条数据对象 
			   value:$.trim(d[i].code)+"-"+$.trim(d[i].name), //与输入的值比较的数据
			   result:$.trim(d[i].code)+"-"+$.trim(d[i].name)  //选中的实际数据
			 };
			}  
			return rows;  
		}, 
		formatItem: function(row, i, max) {
			return  $.trim(row.code)+"-"+$.trim(row.name);
		}
	});	
});

minChars(number):
该参数指定在触发autocomplete之前用户在查询框中输入的最小字符数，通常设置为1，
即文本框值不为空的时候执行autocomplete,如果取值为0，则在用户双击查询文本框或删除文本框内容时查询

width:
该参数的用途是指定下拉框的宽度，通常不用设置，默认的值为和<input>元素相同

max:
查询时下拉列表框中显示的条目数，defaultValue为10 

delay
击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10

autoFile(boolean)
是否在用户选择时自动将用户鼠标所在的值填充到input元素中，default:false

mustMatch(boolean)
参数boolean类型，true时，如果输入的查询条件无法匹配到合适的结果，
则<input>元素中输入的查询值会自动清空，否则会保留。Default:false


selectFirst(boolean)
参数为true时，则用户按下tab键或者return键时会自动将查询结果的第一条记录选中到input元素中 

cacheLength(number)
缓存记录的条数，即从数据库中取得记录要缓存多少条，1为不缓存，defalut:10

matchSubset(boolean)    
是否对从服务器的查询结果使用缓存，比如：上一次的搜索关键字为java，
则下次再次输入java进行查询时不用再次连接服务器查询，
而是从缓存中取得上次查询的结果，这样做可以减少访问服务器的次数，提供性能。Default:true

matchCase(boolean)
是否开启大小写敏感开关，在使用缓存时比较重要

multiple(boolean)
是否允许多值查询，如果为true,则查询到第一条结果后，再次输入查询条件则会后续的查询结果显示出来。

multipleSeparator(string)
只有在multiple属性设置为true时此属性才能生效,该属性用来控制在多条件查询时使用的分隔符，default:”,”

scroll(boolean)
设置当结果集大于默认高度时是否使用滚动条显示,default:true

scrollHeight(number)
查询结果框的显示高度，当超过该高度时会使用scroll 

formatItem(Function)
对服务器返回的每一行数据都调用该函数来处理，返回值将用LI元素包含显示在下拉列表中，
autocomplete会提供三个参数(row,I,max)
其中row表示服务器端返回回来的结果数组，
i为当前的行数(正在处理第几行数据)，
max为返回的记录总数(查询到的结果总数)，default:none，不指定则直接返回服务器的结果值

formatResult(Function)
功能和formatItem基本类似，同样有三个参数作用相同，
暂时没发现写该与不写该函数有什么区别 


formatMatch(Function)
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row 

extraParams (Object):  为服务器端后台提供更多的参数，
参数的形式如下：{name:lixiao},在向后台传递参数时会自动在url后追加该参数?name=lixiao

matchContains (Boolean) 
决定比较时是否要在字符串内部查看匹配，如ba是否与foo bar中的ba匹配.使用缓存时比较重要.

autoFill (Boolean)
要不要在用户选择时自动将用户当前鼠标所在的值填入到input框，Default: false 


formatResult (Function) 
和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.
Default: none,表示要么是只有数据,要么是使用formatItem提供的值.


.result(function(event, row, formatted) {alert(row.to);

result (handler) Returns:jQuery 
此事件会在用户选中某一项后触发，参数为： 
event: 事件对象. event.type为result. 
data: 选中的数据行. 
formatted:formatResult函数返回的值