<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Google Suggest</title>
<style type="text/css">
<!-- @import url("style.css");
-->
</style>
<script src="build.js" language="javascript"></script>
</head>
<body onResize="ReDraw()>
<div align="center">
<form name="Form1" AUTOCOMPLETE="off" ID="Form1">
输入地名: <input type="text" name="txtUserInput" onkeyup="GiveOptions()"/> <!文本输入框 -->
<input type="hidden" name="txtUserValue" ID="hidden1" /> <!隐藏域 -->
<input type="text" name="txtIgnore" style="display:none" /> <!辅助文本输入框 -->
</form>
</div>
</body>
</html>
// JavaScript Document var arrOptions = new Array();//定义一个保存服务端返回的数据数组 var strLastValue = "";//定义保存每一次向服务器发送请求的参数 var theTextBox;//定义表示文本输入变量 var currentValueSelected = -1;//定义下拉提示框中默认的选择项
window.onload = function(){//默认加载方法 var elemSpan = document.createElement("span");
elemSpan.id = "spanOutput";
elemSpan.className = "spanTextDropdown";
document.body.appendChild(elemSpan);
//document.Form1.txtUserInput.onkeyup = GiveOptions;
}
function GiveOptions()//按下按键调用方法 {
var intKey = -1;
if(window.event){
intKey = event.keyCode;
theTextBox = event.srcElement;
//alert(theTextBox.value); // TypeAhead(theTextBox.value); }
if(theTextBox.value.length == 0){ //文本框内容为空 HideTheBox();
strLastValue = "";
return false;
}
if(intKey == 13){ //当按键为Enter GrabHighlighted();
theTextBox.blur();
return false;
}else if(intKey == 38){ //当按键为↑ MoveHighlight(-1);
return false;
}else if(intKey == 40){ //当按键为↓ MoveHighlight(1);
return false;
}
//进行内容比较 if(theTextBox.value.indexOf(strLastValue)!=0||
arrOptions.length==0||(strLastValue.length==0&&theTextBox.value.length>0)||
(theTextBox.value.length<= strLastValue.length))
{
strLastValue = theTextBox.value;
TypeAhead(theTextBox.value);//发送请求方法 }else
{
BuildList(theTextBox.value);
// strLastValue = theTextBox.value; }
} //发送请求方法 function TypeAhead(xStrText)
{
var url = "make?param=" + xStrText;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req){
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
}
//回调方法 function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
parseMessage();
// update the HTML DOM based on whether or not message is valid
}else{
alert ("Not able to retrieve description" + req.statusText);
}
}
else
{
}
}
//分析服务器返回数据 function parseMessage() {
var xmlDoc = req.responseXML.documentElement;
var node = xmlDoc.getElementsByTagName('info');
arrOptions = new Array();
for(var i=0;i<node.length;i++)
{
arrOptions[i]=node[i].firstChild.nodeValue;
}
BuildList(theTextBox.value); //构建提示框 strLastValue = theTextBox.value;
}
function BuildList(theText){//创建下拉提示框方法
SetElementPosition();
var inner = "";
var theMatches = MakeMatches(theText);//获取所要匹配的值
for(var i=0;i<theMatches.length;i++)
{
inner +=theMatches[i];
}
if(theMatches.length>0)//生成符合的字符串 { document.getElementById("spanOutput").innerHTML = inner;
document.getElementById("OptionsList_0").className ="spanHighElement";
currentValueSelected = 0;
}
else
{
HideTheBox();
}
}
//设置下拉提示框位置方法 function SetElementPosition(){
//创建关于位置的x y坐标的变量 var selectedPosX = 0;
var selectedPosY = 0;
//创建关于提示框的长度和宽度的变量 //var theElement = document.Form1.txtUserInput; var theElement = document.getElementsByName("txtUserInput")[0];
//var theTextBoxInt = document.Form1.txtUserInput; var theTextBoxInt = document.getElementsByName("txtUserInput")[0];
if (!theElement) return;
//为提示框的长度和宽度赋值 var theElemHeight = theElement.offsetHeight;
var theElemWidth = theElement.offsetWidth;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
xPosElement = document.getElementById("spanOutput");
xPosElement.style.left = selectedPosX;
xPosElement.style.width = theElemWidth;
xPosElement.style.top = selectedPosY + theElemHeight
xPosElement.style.display = "block";
}
var countForId = 0;
function MakeMatches(xCompareStr)//匹配项方法 {
countForId = 0;
var matchArray = new Array();
for(var i=0;i<arrOptions.length;i++)
{
var regExp = new RegExp(xCompareStr,"ig");
if((arrOptions[i].search(regExp))>=0)//判断当有匹配的项，调用CreateUnderline()返回字符串 {
matchArray[matchArray.length]=CreateUnderline(arrOptions[i],xCompareStr,i);
}
else
{
continue;
}
}
return matchArray;//返回结果 }
var undeStart = "<span class='spanMatchText'>";
var undeEnd = "</span>";
var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
var selectSpanEnd ="</span>";
//定义HTML标记方法 function CreateUnderline(xStr,xTextMatch,xVal){
selectSpanMid = "onclick='SetText(" + xVal + ")'" +
" id='OptionsList_" +
countForId + "' theArrayNumber='"+ xVal +"'>";
countForId++;
var regExp = new RegExp(xTextMatch,"ig");
var start = xStr.search(regExp);
var matchedText = xStr.substring(start,start + xTextMatch.length);
var Replacestr = xStr.replace(regExp,undeStart+matchedText+undeEnd);
return selectSpanStart + selectSpanMid +Replacestr+ selectSpanEnd;
}
//设置选项样式方法 function SetHighColor(theTextBox){
if(theTextBox){
currentValueSelected =
theTextBox.id.slice(theTextBox.id.indexOf("_")+1,
theTextBox.id.length);
}
for(var i = 0; i < countForId; i++){
document.getElementById('OptionsList_' + i).className =
'spanNormalElement';
}
document.getElementById('OptionsList_' +
currentValueSelected).className = 'spanHighElement';
}
//填入文本框方法 function SetText(xVal){
theTextBox = document.getElementsByName("txtUserInput")[0];
theTextBox.value = arrOptions[xVal]; //set text value document.getElementById("spanOutput").style.display = "none";
currentValueSelected = -1; //remove the selected index }
//ENTER按键方法 function GrabHighlighted(){
if(currentValueSelected >= 0){//判断按键的值 xVal = document.getElementById("OptionsList_" +
currentValueSelected).getAttribute("theArrayNumber");
SetText(xVal);
HideTheBox();
}
}
function HideTheBox(){ //隐藏下拉提示框方法 document.getElementById("spanOutput").style.display = "none";
currentValueSelected = -1;
}
function MoveHighlight(xDir){ //选择键方法 if(currentValueSelected >= 0){
newValue = parseInt(currentValueSelected) + parseInt(xDir);//获取按键的值 if(newValue > -1 && newValue < countForId){//判断键的值 currentValueSelected = newValue;
SetHighColor (null);
}
}
}
function ReDraw() //重画文本框位置 {
BuildList(document.getElementsByName("txtUserInput")[0].value);
}ajax联动查询的例子
本文由 admin 创作，采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为:2022-08-09 21:18:58