jQuery autocomplete 远程过滤器

1 数据在客户端并且在客户端过滤数据，原始数据写在javascript中。

这种方式一般不常用，因为数据多了会带来严重的性能问题。

var items= [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
$txtkeys.autocomplete({
	source: function (request, response) {
        var results = $.ui.autocomplete.filter(items, request.term);
        response(results.slice(0, 10));
	}
});

• request.ter 表示在文本框中输入的内容
• results.slice(0, 10) 表示只需要数组中的第0个-第10个元素。因此下拉列表中最多显示10条数据

2 自动补全通常是根据输入的内容在服务器上过滤后返回。

此方式较为常用，非常适合大数据处理，但是对程序员要求高，一个请求必须严格控制是100ms以内才能随时响应用户快速输入的需求。

var items= [];
function getAutoComplete(items,key){
	//远程请求成功后重新绑定数据
	function bindData(items,result){
		items.lenght = 0;
		for(var i=0;i<result.lenght;++i)
			items.push(result[i]);
	};
	(function(items,key){
		//远程请求。成功后调用bindData函数重新设置下拉列表中的数据
	})(items,key);
};
//根据用户的输入远程过滤数据
$txtkeys.autocomplete({
	source: function (request, response) {	
		//客户端无需再过滤，因为服务器已经过滤好数据了
        response(items);
	}
}).on("input",{items:items},function(e) {
	try { 
        getAutoComplete(e.data.items,$.trim(this.value));
	} catch (exp) {
		alert(exp.message);    
    }
});