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")//自定义参数