以前一直在用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>
<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();
}
分享到：
相关推荐
需求：实现带提示的input框，类似百度搜索，有改动的时候去获取常用关键词，数据来源于系统数据库，支持鼠标选择或键盘选择 思路：框架一贯思路，通过class作为监听入口，通过data作为数据传递；通过监听input和...
默认引擎为百度、谷歌供选（下拉√选择搜索引擎）。只需在微型搜索框中输入想要搜索的内容就可直接进行搜索，并且最大的优势就在于此搜索框“如影随形”。另打开Wise浏览器默认主页后也可发现有三个搜索引擎，百度、...
本分类信息网站系统正式版搜索引擎SEO优化非常好,相关关键字排在百度,google的第一页,本套分类信息发布系统自带有韩国风格特色网站模板,并可在后台自助管理编辑前台模板,调用数据使用强大的函数标签调用,利用分站...
util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码...
本分类信息网站系统正式版搜索引擎SEO优化非常好,相关关键字排在百度,google的第一页,本套分类信息发布系统自带有韩国风格特色网站模板,并可在后台自助管理编辑前台模板,调用数据使用强大的函数标签调用,利用分站...
如果不满意Windows自带的搜索工具、Total Commander的搜索、Google 桌面搜索或百度硬盘搜索，如果正在使用或放弃了Locate32，都值得推荐这款体积小巧、免安装、免费、速度极快（比Locate32更快）的文件搜索工具...
本分类信息网站系统正式版搜索引擎SEO优化非常好,相关关键字排在百度,google的第一页,本套分类信息发布系统自带有韩国风格特色网站模板,并可在后台自助管理编辑前台模板,调用数据使用强大的函数标签调用,利用分站...
打个不太恰当的比喻，如今 Google 对待 TensorFlow 系统，有点类似于该公司对待旗下移动操作系统 Android。如果更多的数据科学家开始使用 Google 的系统来从事机器学习方面的研究，那么这将有利于 Google 对日益发展...
6.3 认我测在线认证检测系统的主要功能实现 36 6.3.1用户查询 36 6.3.2订单操作 37 6.3.3个人信息维护 37 6.4.系统功能测试 38 6.4.1 首页功能模块 38 6.4.2 订单功能模块 38 6.4.3 个人信息模块 39 6.4.4页面自适应...
此外，对于带有查询字段的url，get请求一般会将来请求的数据附在url之后，以?分割url和传输数据，多个参数用&连接。 data = {'data1':'XXXXX', 'data2':'XXXXX'} Requests：data为dict，json import requests ...
本教程内只是以特定型号的电脑为例进行演示，鉴于各种电脑不同BIOS设置U盘启动各有差异，所以如果下面的演示不能适用于你的电脑，建议去百度或者谷歌搜索一下你的电脑或者与你的电脑类似的Bios是怎么设置的。...
强大的风格自定义，类似Baidu Google Sogou竞价广告！文字广告以文字形式较为详细的介绍广告主的广告产品，扩大企业或产品的知名度。文字广告位的安排非常灵活，可以出现在页面的任何位置，可以任意排放。文字广告中...
强大的风格自定义，类似Baidu Google Sogou竞价广告！文字广告以文字形式较为详细的介绍广告主的广告产品，扩大企业或产品的知名度。文字广告位的安排非常灵活，可以出现在页面的任何位置，可以任意排放。文字广告中...
本教程内只是以特定型号的电脑为例进行演示，鉴于各种电脑不同BIOS设置U盘启动各有差异，所以如果下面的演示不能适用于你的电脑，建议去百度或者谷歌搜索一下你的电脑或者与你的电脑类似的Bios是怎么设置的。...