实现类似于google,baidu的搜索提示功能，带有上下键选择功能
文章分类:Web前端
以前一直在用ajax实现异步调用,但一直没有时间到带有搜索提示的功能，前几天由于工作需要，终于写了一个，整理了一下代码，我使用的技术是js+dwr2.0,在下面的js中只需要调用一个后台的方法即可.为了更好的演示，所以用一个数组代替。
注:其中部分代码不是原创，但是忘了从哪down下来的了，找了半天，很郁闷，没找到，请原作者多多见谅！对了，偶弄了个附件，呵呵！
suggest.html中的代码,很简单
suggest.js 有down的但是大部分是自己的心血，呵呵！
注:其中部分代码不是原创，但是忘了从哪down下来的了，找了半天，很郁闷，没找到，请原作者多多见谅！对了，偶弄了个附件，呵呵！
suggest.html中的代码,很简单
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>js 搜索提示</title>
- <script language="javascript" src="suggest.js"></script>
- <link type="text/css" rel="stylesheet" href="suggest.css" />
- </head>
- <body onload="noShow();">
- <table>
- <tr>
- <td>
- <input type="text" id="search" onkeyup="javascript:getSearchContent(event);"/><br/>
- </td>
- </tr>
- <tr>
- <td>
- <div id="search_suggest" style="width:525;left:445"></div>
- </td>
- </tr>
- </table>
- </body>
- </html>
suggest.css代码，down下来的
- @charset "utf-8";
- /* CSS Document */
- .suggest_link {
- background-color: #FFFFFF;
- padding: 2px 6px 2px 6px;
- }
- .suggest_link_over {
- background-color: #E8F2FE;
- padding: 2px 6px 2px 6px;
- }
- #search_suggest {
- position: absolute;
- background-color: #FFFFFF;
- text-align: left;
- border: 1px solid #000000;
- }
suggest.js 有down的但是大部分是自己的心血，呵呵！
- //搜索建议 总数
- var length = 0;
- //当前选中的搜索建议
- var currentSelected = -1;
- //获取当前鼠标所获取的行
- var currentOut;
- /**
- * 获取搜索提示信息
- **/
- function getSearchContent( evt )
- {
- var text = document.getElementById("search");
- var key = window.event?evt.keyCode:evt.which;
- if( null != currentOut )
- {
- suggestOut(currentOut);
- }
- //向上键
- if( key == 38 )
- {
- if( currentSelected == -1 )
- {
- currentSelected = 0;
- }
- if( length == 0 )
- {
- currentSelected = 0;
- }
- else
- {
- if( currentSelected == 0 )
- {
- currentSelected = length - 1 ;
- var c = document.getElementById("suggset" + ( 0 ) );
- c.className = 'suggest_link';
- }
- else{
- currentSelected = currentSelected - 1 ;
- }
- }
- if( null != document.getElementById("suggset" + currentSelected ) )
- {
- /** 去除索引的选中颜色 **/
- if( currentSelected == length - 1)
- {
- var c = document.getElementById("suggset" + ( length - 1 ) );
- c.className = 'suggest_link';
- }else
- {
- var c = document.getElementById("suggset" + ( currentSelected + 1 ) );
- c.className = 'suggest_link';
- }
- var current = document.getElementById("suggset" + currentSelected );
- current.className = "suggest_link_over";
- text.value = current.innerHTML;
- }
- return;
- }
- //向下键
- if( key == 40 )
- {
- if( length == 0 )
- {
- currentSelected = 0;
- }
- else{
- //当前选中索引为最后一个时
- if( currentSelected == length - 1 )
- {
- //去除索引的选中颜色
- currentSelected = 0;
- var c = document.getElementById("suggset" + ( length - 1 ) );
- c.className = 'suggest_link';
- }
- else
- {
- currentSelected = currentSelected + 1;
- }
- }
- if( null != document.getElementById("suggset" + ( currentSelected ) ) )
- {
- /** 去除索引的选中颜色 **/
- if( currentSelected == 0)
- {
- var c = document.getElementById("suggset" + ( currentSelected ) );
- c.className = 'suggest_link';
- }else
- {
- var c = document.getElementById("suggset" + ( currentSelected - 1 ) );
- c.className = 'suggest_link';
- }
- /** 添加索引的选中颜色**/
- var current = document.getElementById("suggset" + ( currentSelected ) );
- current.className = "suggest_link_over";
- text.value = current.innerHTML;
- }
- return;
- }
- if( key != 38 && key != 40 )
- {
- if( "" != text.value )
- {
- //调用ajax/dwr方法
- //Suggest.getSuggest( text.value,callBack );
- var datas = new Array();
- datas[0] = "h";
- datas[1] = "ha";
- datas[2] = "hb";
- datas[3] = "hc";
- datas[4] = "hd";
- datas[5] = "he";
- callBack( datas );
- currentSelected = -1;
- onKeySelect();
- }else{
- currentSelected = -1;
- map = null;
- noShow();
- }
- }
- }
- /** 返回结果并显示 **/
- function callBack( data )
- {
- if( null != data )
- {
- document.getElementById('search_suggest').style.display = '';
- var ss = document.getElementById('search_suggest');
- ss.innerHTML = "";
- length = data.length;
- var str = "";
- var height = 10;
- for( var i = 0; i < length; i++ )
- {
- var suggest = '<div id=suggset' + i +' onmouseover="javascript:suggestOver(this);" ';
- suggest += 'onmouseout="javascript:suggestOut(this);" ';
- suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
- suggest += 'class="suggest_link">' + data[i] + '</div>';
- ss.innerHTML += suggest;
- height += 22;
- }
- document.getElementById('search_suggest').style.height = height;
- }
- else{
- document.getElementById('search_suggest').style.display = 'none';
- }
- }
- /** 使用上下键选择搜索提示**/
- function onKeySelect()
- {
- if( null != document.getElementById("suggset" + currentSelected ))
- {
- var current = document.getElementById("suggset" + currentSelected );
- setSearch(current.innerHTML);
- }
- }
- /** 初始化 不显示div **/
- function noShow()
- {
- document.getElementById('search_suggest').style.display = 'none';
- }
- //获取鼠标
- function suggestOver(div_value)
- {
- currentOut = div_value;
- var current = document.getElementById("suggset" + ( currentSelected ) );
- if( null != current )
- {
- current.className = 'suggest_link';
- }
- currentOut.className = 'suggest_link_over';
- currentSelected = -1;
- }
- //失去鼠标
- function suggestOut(div_value)
- {
- div_value.className = 'suggest_link';
- }
- //显示选中的信息
- function setSearch(value)
- {
- document.getElementById('search').value = value;
- document.getElementById('search_suggest').innerHTML = '';
- noShow();
- }