小編給大家分享一下Servlet+Ajax如何實現(xiàn)智能搜索框智能提示功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司成都網站建設定制設計，是成都網站營銷推廣公司,為鑿毛機提供網站建設服務,有成熟的網站定制合作流程，提供網站定制設計服務：原型圖制作、網站創(chuàng)意設計、前端HTML5制作、后臺程序開發(fā)等。成都網站改版熱線：18982081108

利用無刷新技術智能變換搜索框的提示，同百度搜索

效果圖

其基本原理：

1.給搜索框編寫js綁定事件onkeyup(鍵盤輸入時)、onfocus(當鼠標點擊搜索框外的時候清空提示)

2.首先獲得用戶輸入、之后將獲得的數(shù)據(jù)傳給服務器，服務器將數(shù)據(jù)傳給后臺，后臺獲取服務器傳來的數(shù)據(jù)進行處理，得到關聯(lián)數(shù)據(jù)，向前端返回json格式，前端通過回調函數(shù)，將返回來的json解析成文本，將文本傳輸?shù)剿阉骺蛳路降恼故敬?/p>

如下為支持json的jar包

search.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>





//獲得更多關聯(lián)信息的函數(shù)
function getMore(){
 var xmlHttp;
 //首先獲得用戶的輸入
 var content = document.getElementById("keyword");
 if(content.value==""){
  keywordBlur();//執(zhí)行一下清空方法，使搜索框在無數(shù)據(jù)的時候，下方殘留數(shù)據(jù)也動態(tài)清空
  return;
 }
 //alert(content.value);
 //要給服務器發(fā)送用戶輸入的內容，要創(chuàng)建對象,叫XmlHttp對象
 //xmlHttp=獲得XmlHttp對象
 xmlHttp=CreatXMLHttp();
 //alert(xmlHttp);
 //要給服務器發(fā)送數(shù)據(jù)
 var url="serch?keyword="+escape(content.value);
 //如果不用escape這個函數(shù)轉化一下的話，傳中文會有問題
 //true表示javascript的腳本會在send()方法之后繼續(xù)執(zhí)行，而不會等待來自服務器的相應
 xmlHttp.open("GET",url,true);
 //xmlHttp綁定一個回調方法去接受服務器傳來的相應,會在xmlHttp狀態(tài)改變的時候被調用
 //xmlHttp有0~4的狀態(tài)，只關心4的方法
 //4為complete狀態(tài)，表示交互完成，當交互完成時才會調用回調方法
 xmlHttp.onreadystatechange=callback;
 xmlHttp.send(null);//send里面發(fā)送的是內容體，但參數(shù)在URL里已經都寫完了
 //回調函數(shù)==!!注意 這里回調方法要在方法內創(chuàng)建，因為創(chuàng)建的xmlHttp對象不是全局變量
 //是在getMore()方法里創(chuàng)建的，可以將變量提取出來，變成全局變量
 function callback(){
  if (xmlHttp.readyState==4){
   //200代表服務器相應成功。。。404代表資源未找到。。500服務器內部錯誤
   if(xmlHttp.status==200){
    //交互成功，獲得相應的數(shù)據(jù)，是文本格式
    var result=xmlHttp.responseText;
    //解析json格式
    var json=eval("("+result+")");//要在兩邊加個小括號，js才能認識
    //獲得數(shù)據(jù)之后就可以開始展示了。在輸入框的下邊展示
    setContent(json);
   }
  }
 }
 //設置關聯(lián)數(shù)據(jù)展示,參數(shù)代表的是服務器傳遞過來的關聯(lián)數(shù)據(jù)
 function setContent(contents){
  //setLocation();//設置跟輸入框一樣寬度
  keywordBlur();//在每次得到值之前先清空一下之前的殘留數(shù)據(jù)
  var size=contents.length;//根據(jù)關聯(lián)的數(shù)據(jù)長度，來生成多少
  //設置內容
  for(var i=0;i=0;i--){ 
   contentTableBody.removeChild(contentTableBody.childNodes[i]); 
  } 
  document.getElementById("popDiv").style.border="none"; 
}


/* #mydiv{
 position: absolute;
 left:30%;
 top:50%;
 margin-left: 100px;
} */
.mouseOver{
 background: #708090;
 color: #FFFAFA;
}
.mouseOut{
 background: #FFFAFA;
 color: #000000;
}