                        課程
                    
                        /后端開發(fā)
                        
                            /Java
                        
                        /Servlet+Ajax實(shí)現(xiàn)搜索框智能提示

少了功能..

td的綁定的事件，點(diǎn)擊td之后把td內(nèi)容放入input

2013_

2017-05-08

源自：Servlet+Ajax實(shí)現(xiàn)搜索框智能提示 2-8

關(guān)注問(wèn)題我要回答

931

操作

收起

2 回答

白砂糖K
2017-05-10

<%@?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>ajax</title>????<style?type="text/css">????.mouseOver{????????background:?#708090;????????color:?#FFFAFA;????}????.mouseOut{????????background:?#FFFAFA;????????color:?#000000;????}????????</style>?????<body>??<div>????????????<div?style="position:relative">????????<input?type="text"?size="50"?id="keyword"?onkeyup="getMoreContents()"?onblur="keywordBlur()"?onfocus="getMoreContents()">????????<input?type="button"?value="百度">??????</div>??????<div?id="popDiv"?style="position:absolute">??????????<table?id="content_table"?bgcolor="#FFFAFA">??????????????<tbody?id="content_table_body">?????????????????????????????????</tbody>??????????</table>??????</div>??????<div>aaaa</div>??????</div>??</body>??<script?type="text/javascript">??????var?xmlHttp;????function?getMoreContents(){????????var?content=document.getElementById("keyword");????????if(content.value==""){????????????clearContent();????????????return;????????}????????xmlHttp=createXMLHttp();????????var?url="search?keyword="+escape(content.value);????????xmlHttp.open("GET",url,true);????????xmlHttp.onreadystatechange=callback;????????xmlHttp.send(null);????}?????????//創(chuàng)建xmlHttp對(duì)象????function?createXMLHttp(){????????var?xmlHttp;????????if(window.XMLHttpRequest){????????????xmlHttp=new?XMLHttpRequest();????????}????????if(window.ActiveXObject){????????????xmlHttp=new?ActiveXObject("Microsoft.XMLHTTP");????????????if(!xmlHttp){????????????????xmlHttp=new?ActiveXObject("Msxml2.XMLHTTP");????????????}????????}????????return?xmlHttp;????}?????????//回調(diào)函數(shù)????function?callback(){????????if(xmlHttp.readyState==4){????????????if(xmlHttp.status==200){????????????????var?result=xmlHttp.responseText;????????????????var?json=eval("("+result+")");????????????????setContent(json);????????????}????????}????}?????????//設(shè)置關(guān)聯(lián)數(shù)據(jù)的展示????function?setContent(contents){?????????????????clearContent();????????setLocation();????????var?size=contents.length;????????for(var?i=0;i<size;i++){????????????var?nextNode=contents[i];????????????var?tr=document.createElement("tr");????????????var?td=document.createElement("td");????????????td.setAttribute("border",?"0");????????????td.setAttribute("bgcolor",?"#FFFAFA");????????????td.setAttribute("id",i);????????????td.onmouseover=function(){????????????????this.className='mouseOver';????????????};????????????td.onmouseout=function(){????????????????this.className='mouseOut';????????????};????????????td.onclick=function(){//點(diǎn)擊獲取td的值????????????????document.getElementById("keyword").value=this.innerHTML;????????????????clearContent();????????????};????????????var?text=document.createTextNode(nextNode);????????????td.appendChild(text);????????????tr.appendChild(td);????????????document.getElementById("content_table_body").appendChild(tr);????????}????}?????????//清空之前的數(shù)據(jù)????function?clearContent(){????????var?contTableBody=document.getElementById("content_table_body");????????var?size=contTableBody.childNodes.length;????????for(var?i=size-1;i>=0;i--){????????????contTableBody.removeChild(contTableBody.childNodes[i]);????????}????????document.getElementById("popDiv").style.border="none";????}?????????//失去焦點(diǎn)時(shí)????function?keywordBlur(){????????setTimeout("clearContent()",1000);//停一秒再清空，不然選擇無(wú)效????}?????????//設(shè)置數(shù)據(jù)展示樣式????function?setLocation(){????????var?content=document.getElementById("keyword");????????var?width=content.offsetWidth;????????var?left=content["offsetLeft"];????????var?top=content["offsetTop"]+content.offsetHeight;????????var?popDiv=document.getElementById("popDiv");????????popDiv.style.border="black?1px?solid";?????????????????//popDive.style.left=left+"px";????????//popDiv.style.top=top+"px";????????popDiv.style.width=width+"px";????????document.getElementById("content_table").style.width=width+"px";????}??</script></html>

我后面提的問(wèn)題有答案