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;
}
/*下拉列表区域内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);
用过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);