实现类似于google,baidu的搜索提示功能，带有上下键选择功能
以前一直在用ajax实现异步调用,但一直没有时间到带有搜索提示的功能，前几天由于工作需要，终于写了一个，整理了一下代码，我使用的技术是js+dwr2.0,在下面的js中只需要调用一个后台的方法即可.为了更好的演示，所以用一个数组代替。注:其中部分代码不是原创，但是忘了从哪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><linktype="text/css" rel="stylesheet"href="suggest.css" /></head><body ><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 = "h";datas = "ha";datas = "hb";datas = "hc";datas = "hd";datas = "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 +''; suggest += 'onmouseout="javascript:suggestOut(this);" '; suggest += ' '; suggest += 'class="suggest_link">' + data + '</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();}
页:
[1]