<%@ 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>
分享到：
相关推荐
用Ajax+jsp实现的输入框下拉提示。 代码比较简单。主要是为了学习用。
里面集成struts2+spring+hibernate注解,使用mysql数据库，来进行二级下拉，sql文件也在里面，供大家参考，不喜勿喷。个人也花了1个小时研究写出来的。
1.样式 代码如下: <style type=”text/css”> <!– body{background:#fff} .Menu { position:relative; width:180px; height:120px; z-index:1; background: #EEE; border:1px solid #666;...
此程序使用方便简单、易用灵活 ... 更新说明： 1.支持xhtml 2.兼容IE6,IE7,FF 3.支持input显示与value分离【以隐藏域方式提交数据】 4.支持下拉框按钮 5.支持显示结果数量 ...16.当输入框失去焦点时，提示框会自动隐藏
仿GG的输入框下拉提示功能，这是Ajax+jsp版的，测试时需要有JSP环境，否则会出现加载错误，这个示例演示了该功能实现的核心要点，其它的可以举一反三。
Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢： 一杯白开水 网友 的帮助 版本所提的修改建议 *********************************...
ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip ASP实例开发源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax ...
JSuggest--模仿google,百度下拉提示框输入框 Ajax 兼容火狐,包含原码，本人所写，有问题QQ：13697654
ASP源码—飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip
基于ASP的飞飞模仿google下拉提示框输入框 v1.7 Ajax 兼容火狐.zip
16.当输入框失去焦点时，提示框会自动隐藏 ######V1.8解决问题############ 17.解决了鼠标无法选择的问题 ****************************************************************** 文件使用说明： 在需要使用的页面...
Web输入框自动提示,可多选,每个选项可单独删除. 框内显示的是Text的值,表单提交可以得到value值.类似select控件
绝对物超所值,菜鸟必备，有少量注释，不用继续找，我更懂你
HTML5新增的标签datalist实现输入中文/拼音首字母时，自动进入数据库模糊查询，并返回相应的结果，生成datalist，由于在输入框中的输入内容发生变化时，datalist会自动触发下拉框，解决方案非常好，下面通过本文给...
现在遇到这样的需求，要求输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。下面小编给大家分享同js和ajax实现百度智能搜索框，需要的的朋友参考下实现代码
仿GOOGLE下拉提示框方法: 后台数据以 [['关键字符','估计数量'], ['关键字符','估计数量'], ...] 格式输出。 页面onload后调用（因为有body.appendChild方法） var mySuggest = new hansir.TextSuggest(); my...
附件下载可直接运行，特别好用
飞飞Ajax模仿google提示输入框 使用说明 v1.7本程序由飞飞asp乐园编写*************************************************特别感谢： 一杯白开水 网友 的帮助 版本所提的修改建议**********************************...
AjaxQuickSearch是一款快速下拉显示搜索结果的小程序，实现当用户在搜索框中输入内容时，快速显示搜索结果的功能。默认是PHP程序，用户完可以移植到非PHP网站系统中。 使用说明： 用户需要修改三个文件来实现...