js自动完成

js自动完成，实现基本功能，基于jquery

 

$(function(){
	var listLength = 10;//列表长度
	var beginSearch = 1;//开始搜索字符长

	$(":text,textarea").each(function(){
		if($(this).attr("search")){
			var input = $(this);
			var position = input.position();

			var index;
			$(document).click(function(){
				if($("#ul_autocomplete")[0]) $("#ul_autocomplete").remove();
				if($("#ul_autocompleteframe")[0]) $("#ul_autocompleteframe").remove();
			});
			input.keyup(function(ev){
				var ev = ev||window.event;
				var key = ev.keyCode;
				var list = $("#ul_autocomplete li");
				if(key==40||key==38){
					if(key==38){
						if(index==undefined)
							index=0;
						index--;
					}
					if(key==40){
						if(index==undefined)
							index=-1;
						index++;
					}
					index=(list.length+index)%list.length;	//循环队列
					list.css("background-color","#ffffff");
					list.eq(index).css("background-color","#D8EAF8");
					input.val(list.eq(index).text());

				}else{
					$.get(input.attr("search")+"&autocomplete=true","input="+(escape($(this).val())),function(data){
						var items = data.split(",");
						if(!items[items.length-1]) items.length = items.length-1;
						if(items.length>0){
							if($("#ul_autocomplete")[0]) $("#ul_autocomplete").remove();
							if($("#ul_autocompleteframe")[0]) $("#ul_autocompleteframe").remove();
							var down = $("<ul style='position:absolute;list-style:none;border:1px solid;background-color:white;margin:0;padding:0;z-index:100;padding-bottom:15px;'></ul>");
							down.css({width:input.outerWidth(),left:position.left,top:position.top+input.outerHeight()});
							down.attr("id","ul_autocomplete");
							down.appendTo($(document.body));
							if($.browser.msie&&$.browser.version=="6.0"){
								var iframe = $("<iframe id='ul_autocompleteframe' style='border:none;margin:0;padding:0;position:absolute;' frameborder='0' scrolling='no'></iframe>");
								iframe.css({width:down.width()+2,height:20*items.length,left:down.position().left,top:down.position().top});
								iframe.appendTo("body");
							}
							
							for(var i = 0;i<items.length;i++){
								var li = $("<li style='margin:0;padding:0;display:block;cursor:default;'></li>");
								if($.browser.msie&&$.browser.version=="6.0") {
									li.css("width",input.outerWidth()-10);
								}
								li.text(items[i]);
								li.css("padding","3px 5px");
								li.attr("index",i);
								li.mouseover(function(){
									$(this).css("background-color","#D8EAF8");
									index = $(this).attr("index");
								});
								li.mouseout(function(){
									$(this).css("background-color","#ffffff");
								});
								li.click(function(){
									input.val($(this).text());
								});
								li.appendTo(down);
							}
						}
					});
				}
			});
		}
	});
});

 

页面示例代码

 

<input type="text" autocomplete="off" search="ajaxreturn.asp?search=name"  />

 后台示例代码,input的值经过escapse函数编码

 

autocomplete = request("autocomplete") //标识这是自动完成的请求
input = request("input") //得到输入框中的值
length = request("length")//得到结果列表长度
search = request("search")//自定义参数

 

评论

3 楼 zhou695105338 2011-10-14  

zhangyaochun 写道

autocomplete应该有cache机制吧，显示的匹配最大数目应该可以自定义，还有可以增加高亮和键盘操作。。。LZ可以看看网上的其他插件写法

cache还没有，多谢提醒，其他的应该有吧

2 楼 zhangyaochun 2011-10-09  

autocomplete应该有cache机制吧，显示的匹配最大数目应该可以自定义，还有可以增加高亮和键盘操作。。。LZ可以看看网上的其他插件写法

1 楼 zhou695105338 2011-10-09  

先自己顶一个