Ajax实现输入框自动下拉提示
<%@ 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>