<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<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-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind('click', Hide);
});
function Hide(e){
if($(e.target)[0].id =="like")
return;
$("#like").hide();
}
var temp = "";
function fouc(){
var intervalid;
intervalid = setInterval("getconclusionName()", 200);
}
function getconclusionName(){
var conclusionName="";
conclusionName = $("#csn").val();
if (conclusionName != ""){
if(temp !=conclusionName){
temp= conclusionName;
sendConclusion(temp);
}
}
}
function unfouc() {
$("#like").html("");
$("#like").css("display","none");
}
function sendConclusion(conclusionName) {
$.ajax( {
type : "post",
url : "http://localhost:8080/JqueryInput/servlet/NameServlet",
data: "conclusionName=" + conclusionName,
timeout : 20000,
success : function(data) {
var str ="";
var str1="";
$.each(data, function(i, n) {
if ("medicalConclusionVOList"==i){
if(n.length == 0){
$("#like").css("display","none");
}else{
for(var j=0;j<n.length;j++){
str1=n[j];
str+="<span id=\""+j+"\" onclick=select(\'"+str1.conclusionId+"\',\'"+str1.name+"\')>"+n[j].name+"</span>"+"<br><div class=\"line_style1-1\"></div>";
}
$("#like").css("display","block");
}
}
});
$("#like").html(str);
}
});
}
//查询汇总项目
function searchBigProject(){
var key=window.event.keyCode;
var len = 0; //搜索结果的行数
if(document.getElementById("searchTable") != null){
len = document.getElementById("searchTable").rows.length;
}
//如果不是按的上下键或回车键，就向服务器发送异步数据请求
if(key!=38 && key!=40 && key!=13){
var vProjectName = "%"+document.getElementById("bigProjectName").value+"%";
if(vProjectName == "%%"){
return;
}
$.ajax( {
type : "post",
url : "http://localhost:8080/JqueryInput/servlet/ProjectServlet",
timeout : 20000,
success : function(data) {
callback(data);
}
});
}else{ //如果按的是上下键或回车
if(len == 0) {
return ;
}
//检查当前有无鼠标选中
var isCheck=checkSelect();
if(isCheck == -1)
{
document.getElementById("searchTable").rows(0).style.background = "#FF9933";
}else{
if(key == 38){ //按下上方向键
if(isCheck==0)
{
return;
}
else
{
//清空所有搜索框<TR>标签的背景
cleanTr();
document.getElementById("searchTable").rows(parseInt(isCheck)-parseInt(1)).style.background = "#FF9933";
}
}else if(key==40){ //按下了下方向键
if(isCheck == (parseInt(len)-parseInt(1)))
{
return;
}
else
{
//清空所有搜索框<TR>标签的背景
cleanTr();
document.getElementById("searchTable").rows(parseInt(isCheck)+parseInt(1)).style.background = "#FF9933";
}
}else if(key==13){ //如果是按的是回车键
//把被选中的项给填写到搜索框中，并且销毁搜索出来的结果
var vProjectName = document.getElementById("searchTable").rows(isCheck).cells(0).innerText;
var vProjectId = document.getElementById("searchTable").rows(isCheck).cells(0).title;
selectProject(vProjectId,vProjectName);
}
}
}
}
//回调函数
function callback(aa){
var data = new Array();
data[0] = new Array();
data[0][0] = 1;
data[0][1] = '你好';
data[1] = new Array();
data[1][0] = 2;
data[1][1] = '打算';
data[2] = new Array();
data[2][0] = 3;
data[2][1] = '魂牵梦萦';
projectData = data;
if(data.length > 0){
var vInnerHTML = "<table width='194' id='searchTable' border='0' cellspacing='0' cellpadding='0' bgcolor='#FFFF44'>";
for(i=0;i<data.length;i++){
vInnerHTML += "<tr onmouseover='setColor(this)' onmouseout='clearColor(this)' onclick=\"selectProject('"+data[i][0]+"','"+data[i][1]+"')\"'><td title='"+data[i][0]+"'>"+data[i][1]+"</td></tr>";
}
document.getElementById("showProject").innerHTML=vInnerHTML;
//setPosition(document.getElementById('showProject'));
document.getElementById("showProject").style.display="block";
var oh = document.getElementById("showProject").offsetHeight;
var ot = document.getElementById("bigProjectName").parentNode.parentNode.offsetTop;
//alert(ot - oh + 1);
//document.getElementById("showProject").style.top = ot - oh + 1;
}else{
document.getElementById("showProject").style.display="none";
document.getElementById("bigProjectName").value = ""; //如果没有查询到项目就清空输入框
document.getElementById("bigProjectId").value = "";
}
}
//设置DIV层中行的颜色
function setColor(obj){
obj.style.background="#FF9933";
}
//设置DIV层中行的颜色
function clearColor(obj){
obj.style.background="";
}
//检查当前有无鼠标选中搜索的结果
function checkSelect()
{
for(var i=0;i<document.getElementById("searchTable").rows.length;i++)
{
if(document.getElementById("searchTable").rows(i).style.background == "#ff9933")
{
//如果发现有鼠标选中就返回选中的那一条
return i;
}
}
//如果没有鼠标选中则返回-1
return -1;
}
//清除搜索结果行的背景
function cleanTr()
{
for(var i=0;i<document.getElementById("searchTable").rows.length;i++)
{
document.getElementById("searchTable").rows(i).style.background = "";
}
}
//选择汇总项目
function selectProject(projectId,projectName){
alert(projectId+" "+projectName);
//$("bigProjectName").val(projectName);
document.getElementById("bigProjectName").value=projectName;
document.getElementById("showProject").style.display="none";
}
//关闭显示项目名称的层
function closeShowProject(e){
var showProject = document.getElementById("showProject");
if (!showProject) {
return;
}
var vDisplay = document.getElementById("showProject").style.display;
if(vDisplay == "none"){
return;
}
var divLeft = document.getElementById("showProject").style.pixelLeft;
var divTop = document.getElementById("showProject").style.pixelTop;
var divRight = divLeft+document.getElementById("showProject").style.pixelWidth;
var divBottom = divTop+document.getElementById("showProject").style.pixelHeight;
if(e.clientX > divRight || e.clientX < divLeft || e.clientY > divBottom || e.clientY < divTop){
//如果鼠点击在层的外面，就关闭层
document.getElementById("showProject").style.display="none";
}
}
function add(){
var a = new Array();
a[0] = new Array();
a[0][0] = 1;
a[0][1] = '你好';
a[1] = new Array();
a[1][0] = 2;
a[1][1] = '打算';
a[2] = new Array();
a[2][0] = 3;
a[2][1] = '魂牵梦萦';
alert(a);
}
</script>
</head>
<body>
<div>
<input type="hidden" name="bigProjectId"/>
<input type="text" id="csn" name="conclusionName" onfocus="fouc()"/>
<input type="button" value="添加" onclick="add()" /><br/>
<input type="text" id="bigProjectName" size="30" onkeyup="searchBigProject()"/><br>
<div id="showProject" style="position:absolute;display:none;background-color:#F2F2F2;z-index:2;border:solid 1px black;width:194px;" ></div>
</div>
<div class="select_style1" id="like" style="display:none;"></div>
<jsp:include page="suggest.jsp"></jsp:include>
</body>
</html>
分享到：
相关推荐
jsp+ajax实现输入框自动搜索 本文将详细介绍如何使用jsp和ajax技术实现输入框自动搜索功能，类似于百度搜索。 一、标题：jsp+ajax实现输入框自动搜索 该标题表明该技术使用jsp和ajax实现输入框自动搜索功能。 二...
这个"AJAX+ASP实现输入框提示"的示例项目，旨在展示如何使用AJAX技术在ASP页面上创建一个智能提示系统，当用户在输入框中输入文字时，后台将实时搜索匹配的数据并显示为提示。这种功能在许多Web应用中非常常见，如...
本项目"Ajax+jsp 输入框下拉提示"是针对输入框的一种常见功能，即当用户在输入框中输入文字时，系统自动显示下拉列表提供相关建议，提升用户体验。这种技术常用于搜索框、地址输入等场景，以减少用户输入错误和提高...
这个压缩包文件“ASP源码—结合AJAX实现输入框提示(自动完成)修正版.zip”显然包含了利用ASP技术和AJAX（异步JavaScript和XML）来实现输入框自动完成功能的源代码。下面我们将深入探讨这两个技术以及它们如何协同...
例如，可以使用下拉列表、气泡提示等展示方式，并提供清除选项以便用户取消自动完成。 - **性能优化**：对于大数据量的查询，可能需要在服务器端进行预处理或使用索引，以降低查询时间。 - **安全性**：确保用户...
标题中的“仿照百度,google的输入框提示下拉列表”指的是实现类似百度和Google搜索引擎在用户输入关键词时，自动下拉显示出与输入内容相关的搜索建议功能。这种功能在网页开发中常见，能够提高用户体验，让用户快速...
这个项目"ssh+ajax的二级下拉菜单"结合了SSH框架与Ajax技术，实现了动态的、交互式的用户界面，特别是二级下拉菜单的功能。这个功能在网页中常见于地区选择、类别导航等场景，能够提供更流畅的用户体验。 首先，...
本项目名为“ajax模拟百度自动下拉提示框”，其目的是实现一个与百度搜索类似的实时下拉提示功能，为用户提供便捷的模糊查询体验。这个功能广泛应用于各种搜索引擎和输入框，能大大提高用户在输入时的效率。下面将...
在本案例中，我们讨论的是一个基于jQuery实现的输入框下拉提示插件。 首先，让我们深入理解jQuery。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery的核心特性包括...
本示例中的"jquery实现输入框点击出现下拉列表树插件代码"是一个利用jQuery创建的功能，当用户点击输入框时，会弹出一个下拉的树形列表供用户选择。这个功能常见于各种表单输入，如搜索建议、层级结构的选择等，提高...
标题中的“ajax输入框提示集合”指的是利用Ajax技术实现的一种搜索框功能，它可以为用户在输入时提供实时的搜索建议或匹配结果。 描述中提到的“在淘宝上买的，自己搜集和自己用的，打包下载”，这可能是指一个包含...
在JavaScript编程中，实现类似百度或谷歌搜索框的输入框自动下拉补全功能是一项常见的需求，这可以提升用户体验，使用户在输入时快速找到可能的搜索建议。本实例将介绍如何利用JavaScript来创建这样的功能。 首先，...
一般来讲，实现输入框自动补全功能需要用户在输入信息时，实时通过ajax技术向服务器发送请求，服务器根据请求返回可能的匹配数据，然后通过JavaScript将返回的数据动态地显示在输入框下面作为提示。 4. 数据匹配...
在JavaScript编程中，"输入框实现自动提示"是一种常见的交互设计，它通常涉及到HTML、CSS以及JavaScript技术，尤其是Ajax技术的运用，以提供用户友好的输入体验。这种功能常见于搜索框、邮箱地址输入等场景，它允许...
《jQuery实现输入框下拉列表树插件代码详解》 在网页开发中，为了提高用户体验，我们经常需要实现一些交互性更强的功能，如输入框下拉列表树。这个功能允许用户在输入框中输入关键字时，展示出与之相关的分类结构，...
标签“ajax自动提示含有下拉框”进一步确认了这个项目的核心功能，即利用Ajax实现的带有下拉提示的输入组件。 从压缩包的文件名来看，我们可以推测项目的结构和主要组成部分： 1. `WEB-INF`：这是一个标准的Java ...
在本文中，我们将深入探讨如何使用Ajax技术来实现在输入框中输入文字时动态展示下拉列表的效果。这种效果在很多交互式应用中非常常见，例如搜索引擎、网站表单等，能够提供用户友好的交互体验。 首先，我们需要了解...
"ASP+AJAX输入框提示效果"是将这两种技术结合，为用户提供类似Google搜索那样的实时输入提示功能。在用户输入查询词时，服务器会根据输入的内容即时返回相关的建议，这些建议通常以下拉列表的形式显示在输入框下方，...