//by 司徒正美
$.require("ready,event,attr",function(){
var search = $("#search"), hash = window, prefix = "", fixIE = NaN;
search.addClass("search_target");
search.input(function(){//监听输入
var
input = this.value,//原始值
val = input.slice( prefix.length),//比较值
output = []; //用来放置输出内容
if( fixIE === input){
return //IE下肃使是通过程序改变输入框里面的值也会触发propertychange事件，导致我们无法进行上下翻操作
}
for(var prop in hash){
if( prop.indexOf( val ) === 0 ){//取得以输入值开头的API
if( output.push( '<li><a href="javascript:void(0)" data-value="'+prefix +
prop+'">'+ input + "<b>" + (prefix + prop ).slice( input.length ) +"</b></a></li>" ) == 10){
break;
}
}
}
//如果向前遇到点号,或向后取消点号
if( val.charAt(val.length - 1) === "." || (input && !val) ){
var arr = input.split("."); hash = window;
for(var j = 0; j < arr.length; j++){
var el = arr[j];
if(el && hash[ el ]){
hash = hash[ el ];//重新设置要遍历API的对象
}
}
prefix = input == "." ? "" : input;
for( prop in hash){
if( output.push( '<li><a href="javascript:void(0)" data-value="'+prefix +
prop+'">'+ input + "<b>" + (prefix + prop ).slice( prefix.length ) +"</b></a></li>" ) == 10){
break;
}
}
}
$("#suggest_list").html( output.join("") );
if(!input){//重置所有
hash = window;
fixIE = prefix = output = [];
}
});
});
当提示列表出来后，我们就监听上下翻效果。也就是点击键盘的方位键时，会上下高亮提示的条目，并且它填进搜索框中。这时需要绑定keyup事件，检查其keyCode，标准浏览器管它为which，可以看我的这篇博文《javascript 键盘事件总结》。实现原理很简单，定义一个外围的变量，用于存放高亮的位置（索引值），然后用上翻时就减一，用下翻时就加一，然后取得提示列表中的所有a标签，用索引值定位到某一个a标签中，高亮它，然后去掉原先高亮的a标签。
复制代码 代码如下:
//by 司徒正美
$.require("ready,event,attr",function(){
var search = $("#search"), hash = window, prefix = "";
search.input(function(){//监听输入
//.....
});
var glowIndex = -1;
$(document).keyup(function(e){//监听上下翻
if(/search_target/i.test( e.target.className)){//只代理特定元素,提高性能
var upOrdown = 0
if(e.which === 38 || e.which === 104){ //up 8
upOrdown --;
}else if(e.which === 40 || e.which === 98){//down 2
upOrdown ++;
}
if(upOrdown){
var list = $("#suggest_list a");
//转移高亮的栏目
list.eq(glowIndex).removeClass("glow_suggest");
glowIndex += upOrdown;
var el = list.eq( glowIndex ).addClass("glow_suggest");
fixIE = el.attr("data-value")
search.val( fixIE )
if(glowIndex === list.length - 1){
glowIndex = -1;
}
}
}
});
});
最后是回车提交。我又写到一个keyup事件中去。当然你们可以设法把两个keyup合成一个（监听window），我这样写纯粹是为了教学的需要。
复制代码 代码如下:
//by 司徒正美
$.require("ready,event,attr",function(){
var search = $("#search"), hash = window, prefix = "";
search.input(function(){//监听输入
//.....
});
var glowIndex = -1;
$(window).keyup(function(e){//监听上下翻
//.....
});
search.keyup(function(e){//监听提交
var input = this.value;
if(input && (e.which == 13 || e.which == 108)){ //如果按下ENTER键
alert(input)//实际项目中，应该是进行页面跳转，跑到搜索结果页中去的！
}
});
});
到此，suggest效果就完成了。如果下了我的框架的同学，开启服务器，打开文档首页就能看到这个效果。而在实际项目，suggest其实更简单些，就是当输入框文本变化时，AJAX请求后台一个数组，然后再把它拼接成li元素的格式就行了。
您可能感兴趣的文章: