仿Google的Suggest效果

Refer to [url=http://www.jssay.com/blog/index.php/2009/10/19/%e4%bb%bfgoogle%e7%9a%84suggest%e6%95%88%e6%9e%9c/]www.jssay.com[/url]

用过Google的同志都知道，在Google搜索栏里只要输入前几个字符，Google就会自动弹出一个下拉列表，显示相关记录以及记录数。这对正在搜索的人是很有帮助的，当然这些相关记录并不是随机生成的，而是根据在Google中搜索的关键字生成的。

前几天我在项目中遇到这样的问题，需要提供一个search bar去搜索某文件夹下包含关键字的所有文件。于是Google搜索了一下，发现网上有很多类似功能的代码，有AJAX,JQuery,ASP, PHP等6、7个版本。综合比较了一下，还是选择了一个用JS实现的库。

实现很简单:

第一步，为下拉列表设定样式，如下：

#suggest {

position: absolute;

background-color: #FFFFFF;

border: 1px solid #CCCCFF;

font-size: 90%;

width: 200px;

}

#suggest div {

display: block;

width: 200px;

overflow: hidden;

white-space: nowrap;

}

#suggest div.select{

color: #FFFFFF;

background-color: #3366FF;

}

#suggest div.over{

background-color: #99CCFF;

}

第二步，创建页面UI,重要的是要加上一个div块,这是用来显示下拉列表的地方。id可以随便取，重要的是保持一致.

<input id="text" type="text" name="pattern" value="" autocomplete="off" size="10" style="display: block">

<div id="suggest"></div>

第三步，导入suggest.js包。

<script type="text/javascript" src="./js/suggest.js"></script>

第四步，写一个onload方法，在页面加载的时候导入数据。

function startSuggest() {

new Suggest.Local(

"text", // input element id.

"suggest", // suggestion area id.

list, // suggest candidates list

{dispMax: 10, interval: 1000}); // options

}

window.addEventListener ?

window.addEventListener('load', startSuggest, false) :

window.attachEvent('onload', startSuggest);

function startSuggest() {

new Suggest.Local(

"text", // input element id.

"suggest", // suggestion area id.

list, // suggest candidates list

{dispMax: 10, interval: 1000}); // options

}

window.addEventListener ?

window.addEventListener('load', startSuggest, false) :

window.attachEvent('onload', startSuggest);