<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
/* 提示div的样式 */
#suggest {
width:250px;
border:1px solid black;
font-size:14px;
}
/* 提示信息鼠标覆盖时信息 */
div.over {
border:1px solid #999;
background:#FFFFCC;
cursor:hand;
}
/* 提示信息鼠标移出时信息 */
div.out {
border: 1px solid #FFFFFF;
background:#FFFFFF;
width:300px;
}
</style>
<script type="text/javascript">
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
var currentInfo = ""; //用于保存当前用户输入信息
var counter = 1; //读取信息计数器
var isReading = true; //是否处于监视用户输入状态
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
}
}
//读取用户输入信息
function readInfo() {
var state = document.getElementById("state").value;
/*
当用户信息没有变化并且非空时,计数器加1
否则更新currentInfo变量为用户当前输入,重置计数器
*/
if (currentInfo==state && state!="") {
counter++;
} else {
currentInfo = state;
counter = 1;
}
//当计数器累计到3时,如果用户信息仍没有变化,表示用户已停止输入,否则继续监视
if (counter==1) {
getSuggest(state); //向服务器获取提示信息
isReading = false; //设置监视标记为false
} else {
setTimeout("readInfo()", 200); //200毫秒后再次读取用户输入信息
}
}
//向服务器获取提示信息
function getSuggest(state) {
createXmlHttp(); //创建XMLHttpRequest对象
xmlHttp.onreadystatechange = showSuggest; //设置回调函数
xmlHttp.open("GET", "${ctx}/web/chooseState.jsp?state=" + encodeURI(state), true);
xmlHttp.send(null);
}
//处理服务器返回信息
function showSuggest() {
if (xmlHttp.readyState == 4) {
clearSuggest(); //清除现有提示信息
var suggestsText = xmlHttp.responseText;
//测试数据
//suggestsText = "aaaaa|bbbbb|ccccc|ddddd";
//如果服务器返回信息不为空则创建新的suggest
if (suggestsText != "") {
var suggests = suggestsText.split("|"); //使用“|”分隔提示信息
//循环遍历提示信息数组
for (var i=0; i<suggests.length; i++) {
createSuggest(suggests[i]); //创建每条提示信息
}
displaySuggest(); //显示提示信息
} else {
hiddenSuggest(); //隐藏提示信息
}
}
}
//创建提示信息节点
function createSuggest(text) {
var sDiv = "<div class='out' onmouseover=\"this.className='over'\"" + " onmouseout = \"this.className='out'\" onclick='setSuggest(this)'>" + text + "</div>";
document.getElementById("suggest").innerHTML += sDiv; //将新建节点加入suggest div
}
//响应鼠标点击事件,将suggest信息写入用户文本框
function setSuggest(src) {
document.getElementById("state").value = src.innerHTML;
hiddenSuggest(); //隐藏提示信息
}
//当用户再次键入信息时,调用此函数重新打开监视状态
function resetReading() {
if (!isReading) {
isReading = true;
readInfo(); //开始监视用户文本框
}
}
//显示提示信息
function displaySuggest() {
document.getElementById("suggest").style.display = "";
}
//隐藏提示信息
function hiddenSuggest() {
document.getElementById("suggest").style.display = "none";
}
//清空提示信息
function clearSuggest() {
document.getElementById("suggest").innerHTML = "";
}
</script>
</head>
<body onLoad="readInfo()">
<table width="25%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="76%"><table align=center>
<tr>
<td><div id="a" align=center>
<input size=45 type="text" name="state" id="state" onFocus="resetReading()" onKeyUp="resetReading()">
</div></td>
</tr>
<tr>
<td><div id="suggest" style="display:none" align="center"></div></td>
</tr>
</table></td>
<td width="24%" align="center"></td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
行业-电子政务-电子地图搜索提示信息的排序方法及系统.zip
仿百度搜索提示信息
ajax实现搜索提示功能~~~ 通过查寻数据库,获取信息~~~~
利用ajax控件来实现搜索引擎的提示信息功能
在具有搜索功能的App应用中,为了方便大家说搜索。在输入内容时经常会有提示性的内容。 本代码主要使用AutoCompleteTextView控件实现智能提示信息的功能。
JSON ajax jquery java 源代码 搜索提示功能 能提取后台数据定位到页面输入框,提示输入信息
ASP实现搜索框仿GOOGLE智能提示,随输入的信息智能显示相关数据
仿谷歌搜索提示功能源码 源码描述: 此源码仿谷歌搜索提示功能 利用了AjaxControlToolkit.dll控件的autocompleteextender 当用户在搜索框输入信息时,程序会自动从数据库检索信息 无刷新方式显示在输入框下方,提示...
QComboBox和QListWidget结合,输入自动提示功能(仿Google搜索提示)
java script 搜索服务 输入提示并自动搜索 标记 信息框
excel用vba实现输入时逐步提示信息,。
网络游戏-一种用于为网络搜索获取引导提示信息的方法及设备.zip
没有绑定数据库,数据是死的,可以完善绑定数据库进行模糊搜索绑定,效果会更好 设置webform1.aspx为启动页就可以看到效果!略微有些粗糙,希望下载的朋友见谅
高德地图搜索提示获取信息回传activity刷新ui,欢迎加群,Android&Go,Let's go! 521039620,学习交流!
输入时文本自动提示,就像百度搜索那样。可以参考哦大家
利用javascript实现类似于百度,谷歌搜索的自动模糊搜索补全提示的功能,代码中已有详细的注释信息,可以实现鼠标点击,上下方向键浏览点击,enter确认等常用功能,可移植性不错。(修订版)
jQuery可拖动窗口提示信息代码是一款悬浮的窗口提示信息,支持拖动,搜索的提示窗口代码 jQuery可拖动窗口提示信息代码截图
在搜索栏中添加这样的提示信息, 可以引导访客对网站进行搜索, 对技术类, 分享类网站尤其有效. 为了保持良好的用户体验, 我们一般会在搜索之后保留上次搜索的关键字, 如下图是搜索 ‘WordPress’ 关键字之后搜索栏的...
电信设备-信息提示装置、POI搜索结果的提示方法.zip
jquery实现input搜索输入关键词后自动筛选相关信息效果