<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="opt" style="z-index10; width: 168px;position:absolute;border:1px solid black;display: none" ></div>
<input name="inputTest" id='inputTest' size="22" onkeyup="prompt('inputTest',event)" onblur="bodyClick('inputTest',event)"/>
</body>
<script type="text/javascript">
function prompt(obj,event){
var kc = window.event?event.keyCode:event.which;
//如果是键盘方向左键或右键则不做任何操作
if(kc==37 || kc ==39){
return;
}
var cs = document.getElementById(obj);
var opt = document.getElementById("opt");
opt.style.display="";
var left = cs.getBoundingClientRect().left;
var scroll = document.body.scrollTop;
var top =cs.getBoundingClientRect().top+scroll;
opt.style.left=left;
opt.style.top = top+23;
var kc = event.keyCode;
//去空格
var code = cs.value.trim();
var attr;
//此处用于模拟从服务端取出xml数据,真实环境下应为通过你输入的内容模糊查询数据库的数据,用ajax实现.
var xmlStr = '<?xml version="1.0" encoding="utf-8" ?><results><result code="111" name="aaa"></result><result code="222" name="bbb"></result><result code="333" name="ccc"></result></results>';
var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined');
//读XML
//如果为IE
if (window.ActiveXObject){
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xmlStr);
attr=xmlDoc.getElementsByTagName("result");
}
//如果为firefox
if(moz){
var xmlDoc = document.implementation.createDocument("", "doc", null);
xmlDoc.async = false;
domParser = new DOMParser();
xmlDoc = domParser.parseFromString(xmlStr, 'text/xml');
attr=xmlDoc.getElementsByTagName("result");
//alert(attr.length);
}
//根据从服务端取出的xml数据生成一个提示框table
var table ="<table id='valTab' width='100%' cellpadding='0' cellspacing='0' height='100%'>";
for(var i=0;i<attr.length;i++){
table+="<tr style='padding: 0;margin: 0;' onmouseover='tabMouseOver(this)' onmouseout='tabMouseOut(this)' bgcolor='#F0FFFF'>";
table+="<td id='aa"+i+"' style='padding: 0;margin: 0;' width='100%' onclick=tabClick(this,'"+obj+"')>";
table+=attr[i].getAttribute("code")+"："+attr[i].getAttribute("name");
table+='</td></tr>';
}
table+="</table>"
opt.innerHTML = table;
//alert(table);
//如果数据为空则显示框不显示
if(attr.length==0){
opt.style.display="none";
}
//按钮 38 上 40下 13 回车
if(kc == 40 || kc ==38 || kc ==13){
downOrUp(kc,obj);
}
else
{
line = -1;
}
}
var line = -1;
function downOrUp(kc,obj){
var tabLen = $("#valTab tbody tr").length;
if(tabLen==1){
document.getElementById('valTab').rows[0].style.backgroundColor ='#6495ED';
document.getElementById('valTab').rows[0].style.color ='white';
if(kc==13){
var selectVal = $("#valTab tbody tr").eq(0).find("td").eq(0).html();
var index = selectVal.indexOf('：');
var code = selectVal.substring(0,index);
document.getElementById(obj).value=code;
document.getElementById(obj).focus();
bodyClick1();
}
return;
}
if(kc == 40){
line++;
line =(line==tabLen?0:line);
$("#valTab tbody tr").eq(line)
.css("backgroundColor", "#6495ED")
.css("color", "white");
$("#valTab tbody tr").eq(line - 1)
.css("backgroundColor", "#F0FFFF")
.css("color", "black");
}else if(kc == 38){
line--;
line =(line<=-1?tabLen-1:line);
$("#valTab tbody tr").eq(line)
.css("backgroundColor", "#6495ED")
.css("color", "white");
$("#valTab tbody tr").eq(line+1)
.css("backgroundColor", "#F0FFFF")
.css("color", "black");
}
else if(kc == 13){
var selectVal = $("#valTab tbody tr").eq(line).find("td").eq(0).html();
var index = selectVal.indexOf('：');
var code = selectVal.substring(0,index);
var name = selectVal.substring(index+1);
document.getElementById(obj).value=code;
document.getElementById(obj).focus();
bodyClick1();
}
}
function bodyClick1(){
var opt = document.getElementById("opt");
opt.style.display="none";
if($("#valTab")){
$("#valTab").remove();
line = -1;
}
}
//文本框失去焦点时,执行的方法,用于隐藏提示框.
function bodyClick(obj,event){
//取得触发当前事件的对象.
var el;
//IE的情况下
if (window.ActiveXObject){
el = document.activeElement.id;
}else{
//firefox等其他情况下
el = event.explicitOriginalTarget.id;
}
var e = el.substring(0,2);
//如果触发此事件的对象为"aa"开头,表示是通过鼠标点击提示框操作,此时,不通过此方法来执行提示框隐藏操作,所有,return false,不做任何操作.
if(e=='aa'){
return false;
}
var opt = document.getElementById("opt");
opt.style.display="none";
if($("#valTab")){
$("#valTab").remove();
line = -1;
}
}
//鼠标点击提示框某条记录时的操作,把选中的行记录放到文本框中,并隐藏提示框
function tabClick(tdObj,obj){
var value=tdObj.innerHTML;
var index = value.indexOf('：');
var code = value.substring(0,index);
var name = value.substring(index+1);
document.getElementById(obj).value=code;
var opt = document.getElementById("opt");
opt.style.display="none";
line =-1;
}
String.prototype.trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g,"");
}
function tabMouseOver(obj){
var len= obj.parentNode.childNodes.length;
for(var i=0;i<len;i++){
obj.parentNode.childNodes[i].style.backgroundColor="#F0FFFF";
obj.parentNode.childNodes[i].style.color = "black";
if(obj==obj.parentNode.childNodes[i]){
line=i;
}
}
obj.style.backgroundColor="#6495ED";
}
function tabMouseOut(obj){
obj.style.backgroundColor="#F0FFFF";
}
</script>
</html>
附带jquery.js 跟jquery本身自带的一个提示框插件jquery-autocomplete
分享到：
相关推荐
在现代Web应用中，用户界面的交互性和实时性变得至...这个例子中的搜索框智能提示功能，不仅展示了Ajax的实时性，也突显了Servlet在后端处理中的作用。理解并掌握这些技术，对于开发高效、用户友好的Web应用至关重要。
在这个"ajax+servlet原生实现智能提示框"的主题中，我们将深入探讨如何利用这两项技术来创建一个实时、动态的用户输入提示功能。 首先，让我们理解智能提示框的基本概念。在许多Web应用中，当用户在输入框中键入...
本教程将详细介绍如何使用JavaScript创建文字提示框和图片提示框。 1. **基本的JavaScript提示框：alert()** JavaScript 提供了 `alert()` 函数，用于弹出一个带有单一按钮的警告对话框，通常用于简单的信息提示。...
- 使用JavaScript来控制提示框的显示和隐藏，增强交互性。 - 添加自定义图标，如信息图标、警告图标或错误图标，使提示框更具辨识度。 - 创建多态提示框，如信息提示、警告对话框、确认框和错误提示。 - 实现自适应...
"Google智能提示搜索"是一种常见的用户体验优化功能，它在用户输入搜索关键词时提供实时的建议，帮助用户更快地找到他们想要的信息。这个功能的核心在于预测用户的查询意图，并在输入过程中展示相关的搜索建议。在...
最后，添加一个名为“全部”的菜单项，执行的函数会弹出提示框显示“全部”。 在实际应用中，`cityArray` 的值可能需要从服务器获取，而不是硬编码在代码中。这可以通过 AJAX 请求来实现，当用户右键点击时，向...
这里我们关注的是"Servlet+Ajax实现简易的仿百度搜索框智能提示"这一主题。这个技术组合主要用于创建动态、交互性强的用户体验，尤其是对于搜索功能，它能够实时为用户提供可能的搜索建议，就像百度搜索框那样。以下...
在这个例子中，我们利用了`$(this)`来获取当前被悬停的图片元素，然后设置提示框的位置，并通过`fadeIn()`和`fadeOut()`方法实现动画效果。`attr('title')`用于获取图片的`title`属性，这个属性经常用来存放提示信息...
在这个例子中，`@param`和`@returns`注释提供了关于`greet`函数参数和返回值的信息，使得IntelliSense能够更好地理解并提供提示。 在VS2008中，还可以通过"工具"->"选项"->"文本编辑器"->"JavaScript"来定制...
在“datalist小例子”中，我们将探讨如何创建和使用`<datalist>`元素，以及它在实际应用中的优势。 首先，让我们看看`<datalist>`的基本结构。它通常与`<input>`元素一起使用，`<input>`元素的`list`属性指向`...
标题中的“自动补全例子(完美)”指的是一个实现自动补全功能的代码示例，它可能是一个用于输入框的智能提示或搜索建议的功能。在网页开发中，这种功能可以极大地提高用户体验，帮助用户快速找到他们想要的信息或者...
// 如果你想让提示框在下方，可以改为rect.top - tipBubble.offsetHeight - 10 var tipLeft = rect.left + (targetElement.offsetWidth - tipBubble.offsetWidth) / 2; tipBubble.style.top = tipTop + 'px'; ...
在现代Web应用开发中，提供用户友好的交互体验至关重要，其中搜索框的智能提示功能就是一个典型的例子。"Servlet+Ajax实现搜索框智能提示"的案例就是针对这一需求的一个解决方案，它模仿了百度搜索引擎的实时搜索...
SweetAlert是一款优秀的JavaScript库，它为网页应用提供了优雅的、可自定义的提示框替代了浏览器默认的警告对话框。这个库使得开发者可以更轻松地创建具有吸引力的用户交互体验，提升网页应用的整体质感。本资源包含...
在这个例子中，我们看到一个在VS2005环境下构建的智能提示功能，它涉及到两个不同的数据源：SQL Server数据库和XML数据库。 首先，让我们深入了解ASP.NET AJAX。ASP.NET AJAX（Asynchronous JavaScript and XML）是...
2. **应用开发起步**：介绍了集成开发环境和API的准备，以及如何进行ArcGIS API for Javascript的离线部署和智能提示的使用。 3. **基础入门**：详细介绍了地图、图层、Geometry、Symbol、Graphic等基础概念，并...
在描述中，通过两个例子解释了这种搜索提示框的工作方式。首先，当用户开始输入“Zhongguo”时，系统会根据已输入的部分文本推测用户的意图，可能会显示出与“中国”相关的搜索结果。用户不必完全输入“中国”就能...
在Asp.Net开发中，利用Ajax技术可以极大地提升用户体验，特别是在实现搜索输入框的智能提示功能时，Ajax的优势尤为明显。这个"WebSite2"压缩包文件提供的源码就是一个很好的例子，展示了如何将Asp.Net与Ajax控件结合...
本项目“Simple Board Game (Chess) in JavaScript”就是一个很好的例子，它展示如何利用JavaScript来开发一款棋类游戏——国际象棋。通过分析这个项目，我们可以深入理解JavaScript在游戏开发中的应用，以及一些...