页面``很简单,就建立一个input带id名称的,
<script language="javascript">
function setdatasearch(){
var query =document.getElementById("searchtext").value;
var url = "${ctx}/pages/tml/equipinfo.do?method=searchdata&query="+query;
searchdata(url,"searchtext");
}
</script>
<input type="text" id="searchtext" name="searchtext" οnkeyup="setdatasearch();"/>
javascript的脚本search.js
//2007.12.21 linjiasheng
//使用方法 searchdata(url,inputid)
//URL就是连接数据库的地址,在后台要定义格式为<data><query></query></data>的xml格式文本输出,<query>是多行输出的.
//inputid就是jsp页面的text的ID名称
document.write('<span id="draw_findInSelect"></span>');
var xmlHttp;
var arrA ; //全局的数组
var textinput; //传入的text的ID名称
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest)
{
xmlHttp= new XMLHttpRequest();
}
}
//主方法
function searchdata(url,inputid)
{
createXMLHttpRequest();
textinput=inputid;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=initdatahandle;
xmlHttp.send(null);
}
//数据返回控制
function initdatahandle()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
var data = xmlHttp.responseXML.getElementsByTagName("data")[0];
var query=data.getElementsByTagName("query");
initArray(query); //初始化数据
createdivcss(); //建立DIV的CSS
clearrow(); //清除之前在table的数据
creatediv(); //在DIV中加入搜索的数据
//假如返回的长度>0,显示DIV
if(query.length>0){
document.getElementById("searchLayer1").style.display='block';
}else{
document.getElementById("draw_findInSelect").removeChild(document.getElementById("searchLayer1"));
}
}
}
}
function creatediv()
{
var lay1=document.getElementById("searchLayer1");
var texts=document.getElementById(textinput);
var table=document.getElementById("listtable");
var table_body =table.getElementsByTagName("tbody").item(0);
for(var i=0;i<arrA.length;i++){
if(arrA[i].name.indexOf(texts.value) >= 0){
var new_row=createRow(arrA[i].name);
table_body.appendChild(new_row);
}
}
}
function createdivcss(){
var where=draw_findInSelect;
var target=document.getElementById("searchtext");
var offset = parseInt(target.currentStyle.borderWidth);
itop = target.getBoundingClientRect().top + target.offsetHeight - offset;
ileft = target.getBoundingClientRect().left - offset;
iwidth = target.offsetWidth;
iheight = target.offsetHeight;
var divHTML='<div id="searchLayer1" style="top:'+itop+';left:'+ileft+';width:'+iwidth+';height:'+iheight+';position:absolute;z-index:2;border: 1pt solid #000000;display:none;">'
divHTML +='<table name="listtable" id="listtable" border="0" ><tbody><tr><td></td><tr></tbody></table></div>';
where.innerHTML=divHTML;
}
function initArray(data)
{
arrA=new Array();
for(var i=0;i<data.length;i++){
arrA.push({name:data[i].firstChild.data});
}
}
function createRow(message)
{
var row = document.createElement("tr");
var cell = document.createElement("td");
var div =document.createElement("<div οnclick='selectvalue(this);' οnmοuseοver='selectFX(this)' style='width:100%'/>");
div.innerHTML=message;
cell.appendChild(div);
row.appendChild(cell);
return row;
}
function clearrow()
{
var table=document.getElementById("listtable");
var table_tbody=table.childNodes.item(0);
var rowlength=table_tbody.childNodes.length;
for(var i=0;i<rowlength;i++){
var table_tr=table_tbody.childNodes.item(0);
table_tbody.removeChild(table_tr);
}
}
//在DIV中选择数据,填入TEXT INPUT中
function selectvalue(obj)
{
var text=document.getElementById("searchtext");
text.value=obj.innerHTML;
var lay1=document.getElementById("searchLayer1");
lay1.style.display='none';
}
//选择样式
var lastOver_findInSelect = null
function selectFX( which ){
obj = lastOver_findInSelect
if( obj != null && which != obj ){
obj.style.cssText="color:windowtext;background:white;"
}
which.style.cssText="color:highlighttext;background:highlight;"
lastOver_findInSelect = which
}