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 style="display:none;"></div>
?<jsp:include page="suggest.jsp"></jsp:include>
? </body>
</html>
