javascript suggest效果效果 自动完成实现代码分享自动完成实现代码分享
像百度与google，当我们往搜索框输入东西时就会出现一排列表提示用户有什么热门或适合的候选词，这种效
果就叫suggest。本文将一步步教你如何设计它
首先，用到的框架当然是我的框架mass Framework，当然你用其他框架也可以，如jQuery，没有什么复杂的东西。只要弄懂
原理，一下子就能搞出来。想必，以后你们工作也遇到做搜索框的活儿。
由于本人没有后端，因此取用一个对象作为本地数据库。而我现在要做的，其实远远比suggest高级，类似IDE的语法提示的
东西。当前成品已放到github上。
好了，我们动手吧。首先是结构层，装了FF的同学可以在百度首页查看源码，当输入几个字母时，会动态生成了那些HTML。
不过怎么也好，其成就是一个DIV放到搜索栏的下方，里面放了一个table，table动态存放候选词。并且候选词如果不是用户输
入的部分，也就是说，JS自动补充的部分它会把它们放到一个b标签加粗显示出来。不过， 我觉得用table太重量化，改用了ul
列表，为了让IE6也支持掠过变色效果，我还在里面套了一个a标签。为了放便取词，我还为它(a标签)，添加了一个属性，专
门用于存放补充元整后的词汇。大抵是这个样子：
复制代码 代码如下:
<div id="search_wrapper">
<div>
<input id="search" autocomplete="off">
</div>
<div id="suggest_wrapper">
<ul id="suggest_list">
<li>
<a data-value="完整的词汇" href="javascript:void(0)">
用户输入部分
自动提示部分
</a>
</li>
<li>
<a data-value="完整的词汇" href="javascript:void(0)">
用户输入部分
自动提示部分
</a>
</li>
<!-- 更多li 最多10个 -->
</ul>
</div>
</div>
看一看结构，其实就是两部分，div#search_wrapper为可见，div#suggest_wrapper为“不可见”（只要里面没有li元素，它就不
占空间，显示不出来了）。input搜索框有个属性autocomplete，用于关掉浏览器自带的提示功能。关于data-value，这种命名
方法是HTML5推荐的方式，用于定义要缓存的数据，data-*在新锐浏览器中会放到一个叫dataset的对象中。比如：
复制代码 代码如下:
<div id="司徒正美"
data-drink="coffee"
data-meal-time="12:00">12:00</div>
我们可以通过如下方式访问到它：
复制代码 代码如下:
var el= document.getElementById('司徒正美');
alert( el.dataset.drink );
alert( el.dataset.mealTime );
当然，你也可以不用设置属性，直接取a标签的innerText或textContext。
注意：完整的词汇 = 用户输入部分 + 自动提示部分。因此你不要在a标签里面加这么多东西，防止出现空格什么的，导致检索
失败！
接着是样式部分，不过不详述了。很简单：
复制代码 代码如下:
#search_wrapper {
height:50px;
资源评论
