<!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>
分享到：
相关推荐
在电子政务领域，电子地图搜索提示信息的排序方法与系统是至关重要的技术组成部分，它直接影响到用户在查找地理位置、公共服务设施或行政区域时的效率和体验。本文将深入探讨这一主题，详细介绍电子地图搜索提示信息...
【标题】"仿百度搜索提示信息"涉及到的技术主要包括JavaScript（js）和jQuery特效的实现，目的是在用户输入关键字时，动态展示与之相关的搜索建议，提高用户体验。 【描述】"仿百度搜索提示信息"通常指的是在网页上...
在网页开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于实现动态、无刷新的交互体验，其中一个常见的应用场景就是搜索提示功能。该功能能够显著提升用户体验，当用户在搜索框输入关键词时，系统...
在这个场景下，`后台执行的Action.java代码（基于Struts）.txt`文件应该包含了处理搜索提示请求的类。这个类会接收来自前端的输入，可能是一个部分完成的搜索词，然后根据这个输入去执行相应的搜索建议算法。这个...
例如，当用户在搜索框输入关键词时，前端会通过AJAX发送请求到服务器，服务器接收到请求后处理数据，然后以JSON格式返回匹配的搜索提示。 接着，AJAX（Asynchronous JavaScript and XML）是用于创建动态网页的技术...
输入框将用于捕获用户输入，而结果展示区域将显示搜索提示。 2. **JavaScript事件监听**：使用JavaScript（通常与jQuery库结合使用）监听输入框的`keyup`事件。每当用户在输入框中键入字符时，就会触发这个事件。 ...
在搜索提示系统中，通常有一个存储搜索历史、热门搜索词等信息的数据库表，用于生成搜索建议。 6. **搜索提示的实现流程**： - 用户在搜索框中输入字符。 - js.js监听到输入变化，通过Ajax发送HTTP GET或POST请求...
在搜索提示系统中，数据库用于存储可供搜索的关键词或者数据，以及可能的相关信息，如搜索热度等。 5. **MVC设计模式**：在JSP项目中，Model-View-Controller (MVC) 设计模式常被采用，以保持代码的结构清晰。Model...
**jQuery智能搜索提示框**是基于JavaScript库jQuery实现的一种交互式搜索功能，它可以在用户输入时动态显示与输入内容匹配的建议结果。这种技术在网页应用中非常常见，可以极大地提升用户体验，使得用户能快速找到...
标题中的“搜索提示功能”指的是在用户输入查询时，搜索引擎会自动显示可能的搜索建议，以帮助用户更快地找到他们想要的信息。这种功能通常基于用户的输入关键字、热门搜索趋势以及历史搜索数据。在Google中，这个...
在网页设计中，提示信息是用户体验的重要组成部分，它帮助用户理解页面元素的功能和内容，特别是在交互性较强或者图像丰富的网站中。"title"和"alt"属性是HTML中用于提供这种提示信息的关键元素。 首先，`title`...
标题中的“网络游戏-一种用于为网络搜索获取引导提示信息的方法及设备”暗示了这是一个关于网络游戏领域，特别是涉及网络搜索优化的技术方案。这个方法可能旨在帮助用户在网络游戏中更有效地找到他们需要的信息，...
特别是JavaScript，它负责监听用户输入事件，触发提示信息的加载和显示。 2. **AJAX异步请求**：为了不阻塞用户输入，通常会使用AJAX（Asynchronous JavaScript and XML）技术向服务器发送异步请求，获取与输入...
而实现QComboBox输入自动提示功能，可以极大地提升用户体验，类似于Google搜索框的自动完成效果。这个功能在开发过程中常用于减少用户的输入负担，提高数据选择的效率。本篇将详细介绍如何在C++中使用Qt库来实现这一...
为了使提示信息美观且易读，HTML代码会配合CSS（Cascading Style Sheets）来定义样式，包括颜色、字体、布局等。这确保了提示框与网页其他元素的协调性，提升整体用户体验。 6. **JavaScript事件处理**： 使用...
前端接收到这个返回结果后，根据返回的数据动态更新页面上的搜索提示信息。 综合以上内容，***搭配Ajax实现搜索提示功能不仅涉及前端JavaScript技术，还包括后端的***数据处理能力，是一个前后端协作的过程。通过...
模糊提示搜索，也称为自动补全或预测搜索，是指用户在输入搜索关键词时，搜索引擎根据已输入的部分内容，实时提供可能的完整搜索词或建议，以帮助用户快速找到目标信息。Google的模糊提示搜索技术非常先进，它不仅...
【标题】：“百度首页搜索提示框效果” 在互联网搜索引擎领域，百度作为国内的巨头，其首页的搜索体验设计是至关重要的。"百度首页搜索提示框效果"是指用户在百度搜索框输入关键词时，搜索引擎会实时显示出与输入...
在Android应用开发中，创建一个类似百度搜索提示框的功能是一项常见的需求。这个功能不仅可以提高用户的交互体验，还能帮助用户快速找到他们想要搜索的信息。在这个项目中，我们将关注如何在Android平台上实现一个仿...
在网页开发中，实现类似谷歌搜索的实时联想提示功能可以显著提升用户体验，使用户能够更快地找到所需信息。这种功能通常结合了服务器端的PHP技术和客户端的AJAX（异步JavaScript和XML）技术。下面将详细介绍如何利用...