首先，用到的框架当然是我的框架mass Framework，当然你用其他框架也可以，如jQuery，没有什么复杂的东西。只要弄懂原理，一下子就能搞出来。想必，以后你们工作也遇到做搜索框的活儿。 由于本人没有后端，因此取用一个对象作为本地数据库。而我现在要做的，其实远远比suggest高级，类似IDE的语法提示的东西。当前成品已放到[url=https://github.com/RubyLouvre/mass-Framework/blob/master/doc/index.html]github[/url]上。 [img]http://files.jb51.net/upload/201202/20120217102704594.jpg[/img] 好了，我们动手吧。首先是结构层，装了FF的同学可以在百度首页查看源码，当输入几个字母时，会动态生成了那些HTML。不过怎么也好，其成就是一个DIV放到搜索栏的下方，里面放了一个table，table动态存放候选词。并且候选词如果不是用户输入的部分，也就是说，JS自动补充的部分它会把它们放到一个b标签加粗显示出来。不过， 我觉得用table太重量化，改用了ul列表，为了让IE6也支持掠过变色效果，我还在里面套了一个a标签。为了放便取词，我还为它(a标签)，添加了一个属性，专门用于存放补充元整后的词汇。大抵是这个样子： 看一看结构，其实就是两部分，div#search_wrapper为可见，div#suggest_wrapper为“不可见”（只要里面没有li元素，它就不占空间，显示不出来了）。input搜索框有个属性autocomplete，用于关掉浏览器自带的提示功能。关于data-value，这种命名方法是HTML5推荐的方式，用于定义要缓存的数据，data-*在新锐浏览器中会放到一个叫dataset的对象中。比如： 我们可以通过如下方式访问到它：

[url=javascript:void(0)]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)" class="search_target" 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 键盘事件总结[/url]》。实现原理很简单，定义一个外围的变量，用于存放高亮的位置（索引值），然后用上翻时就减一，用下翻时就加一，然后取得提示列表中的所有a标签，用索引值定位到某一个a标签中，高亮它，然后去掉原先高亮的a标签。 最后是回车提交。我又写到一个keyup事件中去。当然你们可以设法把两个keyup合成一个（监听window），我这样写纯粹是为了教学的需要。 到此，suggest效果就完成了。如果下了我的框架的同学，开启服务器，打开文档首页就能看到这个效果。而在实际项目，suggest其实更简单些，就是当输入框文本变化时，AJAX请求后台一个数组，然后再把它拼接成li元素的格式就行了。