autocomplete实现原理
主要用在input 和 textarea这两个标签上,为这标签增加键盘监听事件和提示列表添加鼠标事件。
例如:input的id为txt
为input增加键盘监听事件(keyup)
var mindex = -1; $("#txt").keyup(function(e){ e = e || window.event; if(e.keyCode !== 27 && e.keyCode !== 38 && e.keyCode !== 40){ _mtxt = $(this).val(); fqaInit(_mtxt,_faqData); //创建列表 } if(e.keyCode === 27){ //esc键 退出 $("#mlist").remove(); $(this).val(_mtxt); } if(e.keyCode === 38){ //上键 if(mindex>-1){ mindex--; } if(mindex===-1){ mindex = $("#mlist li").length-1; } $("#mlist li").attr("class","").eq(mindex).attr("class","on"); var choosetxt = $("#mlist li").eq(mindex).text(); $("#txt").val(choosetxt); } if(e.keyCode === 40){ //下键 mindex++; if(mindex===$("#mlist li").length){ mindex = 0; } $("#mlist li").attr("class","").eq(mindex).attr("class","on"); var choosetxt = $("#mlist li").eq(mindex).text(); $("#txt").val(choosetxt); } });
为列表增加鼠标事件(mouseover)
$("#mlist li").live("mouseover",function(){ mindex = $(this).index(); $("#mlist li").attr("class","").eq(mindex).attr("class","on"); var choosetxt = $("#mlist li").eq(mindex).text(); $("#txt").val(choosetxt); });
创建列表
function fqaInit(words,arr){ $("#mlist").remove(); //移除列表 if($.trim(words)!==""){ //当内容部位空时 var count = 0; //记录列表个数 var html = ""; html += "<ul id='mlist'>"; for(var i=0,j=arr.length;i<j;i++){ if((arr[i].title.toLocaleLowerCase().indexOf(words.toLocaleLowerCase()))!=-1){ count++; html+="<li>"+arr[i].title.replace(words,"<span style='color:#FF6666;'>"+words+"</span>")+"</li>"; if(count>10){ //限制最大显示10个 break; } } } html+="</ul>"; if(count>0){ //存在时插入body中 $("body").append(html); } } }