仿Google的Suggest效果

Refer to www.jssay.com

用过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;
}
/*下拉列表区域内div的样式*/
#suggest div {
display: block;
width: 200px;
overflow: hidden;
white-space: nowrap;
}

/*方向键的上下移动会引起选项的样式变化*/
#suggest div.select{ /* keydown, keyup */
color: #FFFFFF;
background-color: #3366FF;
}

/*鼠标移动到列表选项时的样式*/
#suggest div.over{ /* mouse 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
}
/*参数说明：
第一个参数：文本域标签的id
第二个参数：下拉列表区域的id
第三个参数：下拉列表的选项列表
第四个参数：可选项，具体如下。

interval : 两次搜索的时间间隔，默认为500毫秒。
dispMax : 可显示的最大选项数。
listTagName : 为了产生一个标签名字列表(默认为div) 。
prefix :向前匹配为true，部分匹配为false，默认为false。
ignoreCase : 搜索时区分大小写，默认值为true。
highlight : 匹配字符要高亮显示，默认值为true。
dispAllKey : 按CTRL + Down (Opera, CTRL + ALT + Down), 将匹配的所有候选名单都显示出来。
classMouseOver : 鼠标滑过时的样式，默认为"over"。
classSelect : 选中时的样式，默认为"select"。
hookBeforeSearch : 在search之前开始一个函数的执行过程。
delim : 多个关键字搜索时的分割符 (默认为空格) 。
*/

window.addEventListener ?
window.addEventListener('load', startSuggest, false) :
window.attachEvent('onload', startSuggest);

评论

2 楼 jssay 2009-10-22  

jbas 写道

如果是动态去取数据，该如何去做呢?

只要想办法将数据Push到List中就可以了，在JSP中我们可以在Javascript中嵌入java代码，如下：

 var list = new Array();
<%
        Iterator keyIter = keys.iterator();
        while(keyIter.hasNext()){
%>
        list.push("<%=(String)keyIter.next()%>");
<%
        }
%>

      

1 楼 jbas 2009-10-22  

如果是动态去取数据，该如何去做呢?