jsp+ajax实现输入筐自动搜索
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Default.js:
//下拉表当前选中项的索引
var currentIndex = -1;
var requestObj;
//自动完成
function autoComplete()
{
//如果按下向上, 向下或回车
if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
{
//选择当前项
selItemByKey();
}
else //向服务器发送请求
{
//恢复下拉选择项为 -1
currentIndex = -1;
if(window.XMLHttpRequest){
requestObj = new XMLHttpRequest();
if(requestObj.overrideMimeType){
requestObj.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
try{
requestObj = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
requestObj = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//开始请求
//requestObj = new ActiveXObject("Microsoft.XMLHTTP");
requestObj.onreadystatechange = displayResult;
var workVendortemp=document.form1.workVendor.value;
requestObj.open("POST", "inputSubChannel?name="+workVendortemp+"&ts=" + new Date().toLocaleString(), true);
requestObj.send(document.getElementById("workVendor").value);
}
}
//显示结果
function displayResult()
{
if (requestObj.readyState == 4)
{
showData();
divContent.style.display = "";
}
}
//显示服务器返回的结果 ,并形成下拉表
function showData()
{
//显示转后后的结果
divContent.innerHTML = requestObj.responseText;
}
//通过键盘选择下拉项
function selItemByKey()
{
//下拉表
var tbl = document.getElementById("tblContent");
if (!tbl)
{
return;
}
//下拉表的项数
var maxRow = tbl.rows.length;
//向上
if (event.keyCode == 38 && currentIndex > 0)
{
currentIndex--;
}
//向下
else if (event.keyCode == 40 && currentIndex < maxRow-1) {
currentIndex++;
}
//回车
else if (event.keyCode == 13)
{
var VL = tbl.rows[currentIndex].innerText;
if(VL!=undefined){
var VLS =VL.split("(");
document.getElementById("workVendor").value = VLS[0];
}
initList();
return;
}
clearColor();
if(tbl.rows[currentIndex].innerText.title!=undefined){
document.getElementById("workVendor").value =
tbl.rows[currentIndex].innerText.title;
}
//设置当前项背景颜色为blue 标记选中
tbl.rows[currentIndex].style.backgroundColor = "#426FD9"; }
//清除下拉项的背景颜色
function clearColor()
{
var tbl = document.getElementById("tblContent");
for (var i = 0; i < tbl.rows.length; i++)
{
tbl.rows[i].style.backgroundColor = "";
}
}
//选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值function selValue()
{
if (event.keyCode != 13)
{
var text = event.srcElement.title;
if(text!=undefined){
var temp = text.split("#");
document.getElementById("workVendor").value = temp[0];
document.getElementById("mainChanel").value = temp[1];
document.getElementById("subChanel").value = temp[2];
}
}
initList();
}
//文本框失去焦点时设置下拉表可见性
function setDisplay()
{
//获取当前活动td的表格
if (document.activeElement.tagName == "TD")
{
var tbl =
document.activeElement.parentElement.parentElement.parentElement; //如果不是下拉表,则隐藏下拉表
if (tbl.id != "tblContent")
{
initList();
}
return;
}
initList();
}
function initList()
{
divContent.style.display='none';
divContent.innerHTML = "";
currentIndex = -1;
}
inputSubChannel.jsp:
<%@ include file="../common/taglib.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<table cellSpacing="0" cellPadding="0"
width="150px" align="center" border="0" id="tblContent"
style="background-color:#FFFFFF;border:1px solid #999999;">
<c:forEach items="${channelSublist}" var="channelSub">
<tr>
<td height="20" nowrap onclick="selValue()" style="cursor:hand" onmouseover="clearColor();this.parentElement.style.backgroundColor='#426FD9'" onmouseout="clearColor()"
title="${}#${ChanId}#${channelSub.id}">
${}
</td>
</tr>
</c:forEach>
</table>
</body>
</html>
实现页面:
<tr bgcolor="#d4eaff">
<td>
<div align="right">
提供厂商名称：
</div>
</td>
<td bgcolor="#D4EAFF" height="1px;">
<input name="workVendor" type="text"
id="workVendor" onclick="autoComplete()" onkeyup="autoComplete()"
onblur="setDisplay();" maxlength="50"/>*
<div id="divContent" style="padding-left:0px;display:none;
position:absolute;"></div>
</td>
<td >
<input name="mainChanel" type="hidden" id="mainChanel" />
<input name="subChanel" type="hidden" id="subChanel" />
</td>
</tr>。