JSP AJAX模擬實現自動補全的兩種方式
阿新 • • 發佈:2019-02-12
//Servlet的方式 package web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import service.UserService; public class SuggestServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out=resp.getWriter(); String keyword=req.getParameter("keyword"); //利用service來進行測試 if(! "".equals(keyword.trim())){ UserService userService=new UserService(); String result=userService.queryUsernameByKeyword(keyword); if(result!=null){ out.println(result); }else{ out.println(""); } } out.close(); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } }
html頁面內容:
<h3>利用Ajax實現搜尋自動補齊提示!</h3>
<div style="width:500px">
<input type="text" id="txtSearch" name="txtSearch"/>
<input type="submit" id="cmdFind" name="cmdFind" value="搜尋"/>
<div id="suggest"></div>
</div>
原生JS方式
var xhr; function createXhr(){ try{ return new XMLHttpRequest(); }catch(e){ return new ActiveXObject("Microsoft.XMLHTTP"); } } //使用者名稱文字框失去焦點的處理函式; function findSuggest(){ xhr=createXhr(); var keyword=document.getElementById("txtSearch").value; alert(keyword); xhr.onreadystatechange=callback; xhr.open("post","suggestAction",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("keyword="+keyword); } function callback(){ if(xhr.readyState==4){ if(xhr.status==200){ var sobj=document.getElementById("suggest"); sobj.innerHTML=""; var str=xhr.responseText.split(","); var suggest=""; if(str.length>0 && str[0].length>0){ for(i=0;i<str.length;i++){ suggest+="<div onclick='setSearch(this.innerHTML);'"; suggest+=">"+str[i]+"</div>"; } sobj.innerHTML=suggest; document.getElementById("suggest").style.display="block"; }else{ document.getElementById("suggest").style.display="none"; } } } } function setSearch(obj){ document.getElementById("txtSearch").value=obj; document.getElementById("suggest").style.display="none"; }
2.使用jquery的方式
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> //1.找物件;2.定事件;匿名事件; $(function(){ $("#txtSearch").keyup(function(){ //傳送post請求,設定請求url,請求資料,成功返回函式; $.post("suggestAction",{keyword:$("#txtSearch").val()},callback); }); }); function callback(data){ var sobj=$("#suggest"); sobj.innerHTML=""; var suggest=""; var str=data.split(",");alert(data); if(str.length>0 && str[0].length>0){ for(i=0;i<str.length;i++){ suggest+="<div onclick='setSearch(this.innerHTML);'"; suggest+=">"+str[i]+"</div>"; } sobj.html(suggest).css("display","block"); }else{ sobj.css("display","none"); } } //將內容填充到搜尋框中; function setSearch(obj){ $("#txtSearch").val(obj); $("#suggest").css("display","none"); } </script>