先上效果.
說明:這里重在前端實現,js部分,這里輸入a 彈出"ajax" 和"ajax 教程"只是后台集合模擬的數據.通過ajax返回到前端的與a匹配的數據.
基礎: html,JavaScript,ajax,css,servlet.
實現原理:
總體思路:輸入框監測鍵盤動作,按壓后,獲取當前input 的value,異步發送到后台,匹配數據庫數據,返回json結果集到前端,js動態植入到html中.
說起來挺簡單的,實際上有很多細節要處理,
1)輸入a后,刪除a ,下拉框東西要全部清除.
2)輸入a后再輸入j,要把之前a彈出的下拉提示刪了,換成aj做為keyword換取的下拉提示.
3)input失去焦點,下拉提示消失,獲得焦點,下拉提示又出現
4)鼠標移動到下拉提示中的某一個選項后 ,該選項顏色突會出顯示,移走后顏色又恢復正常.
5)下拉框的定位等問題.
提示:以上描述可能比較抽象,可以參照百度,試一下,就容易理解些.
重點!!!!
前端部分:
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <style> 6 #myDiv { 7 position: absolute; 8 left: 50%; 9 top: 50%; 10 margin-left: -200px; 11 margin-top: -50px; 12 } 13 .mouseOver{ 14 background-color: #708090; 15 color:#FFFAFA; 16 } 17 18 .mouseOut{ 19 background-color: #FFFAFA; 20 color:#000000; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="myDiv"> 26 <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onfocus="getMoreContents()" onblur="clearContent()"/> 27 <input type="button" value="搜索一下" width="50px" /> 28 <div id="popDiv"> 29 <table id="content_table" bgcolor="#FFFAFA" border="0" 30 cellspacing="0" cellpadding="0"> 31 <tbody id="content_table_body"> 32 <!-- 動態數據在這里顯示 --> 33 34 </tbody> 35 </table> 36 </div> 37 </div> 38 </body> 39 40 <script type="text/javascript"> 41 function getMoreContents() { 42 var keyword = document.getElementById("keyword").value; 43 if (keyword == "") { 44 clearContent(); 45 return; 46 } else { 47 var ajax = new XMLHttpRequest(); 48 var url = "SearchServlet?keyword=" + keyword; 49 ajax.open("GET", url, true); 50 ajax.send(null); 51 ajax.onreadystatechange = function() { 52 if (ajax.readyState == 4) { 53 if (ajax.status == 200) { 54 var result = ajax.responseText; 55 insertContent(result); 56 } 57 } 58 } 59 } 60 } 61 function insertContent(content) { 62 clearContent(); 63 setLocation(); 64 var json = JSON.parse(content); 65 var len = json.length; 66 for (var i = 0; i < len; i++) { 67 var value = json[i]; 68 var tr = document.createElement("tr"); 69 var td = document.createElement("td"); 70 td.setAttribute("bgcolor", "#FFFAFA"); 71 td.setAttribute("border", "0"); 72 td.onmouseover = function() { 73 this.className = 'mouseOver'; 74 }; 75 td.onmouseout = function() { 76 this.className = 'mouseOut'; 77 }; 78 td.onclick = function() { 79 // document.getElementById("keyword").value=this.; 80 }; 81 var text = document.createTextNode(value); 82 td.appendChild(text); 83 tr.appendChild(td); 84 document.getElementById("content_table_body").appendChild(tr); 85 } 86 87 } 88 89 function clearContent() { 90 var popNode = document.getElementById("popDiv"); 91 popNode.style.border = "none"; 92 var contentNode = document.getElementById("content_table_body"); 93 var len = contentNode.childNodes.length; 94 for (var i = len - 1; i >= 0; i--) { 95 contentNode.removeChild(contentNode.childNodes[i]); 96 } 97 } 98 function setLocation(){ 99 var inputNode = document.getElementById("keyword"); 100 var width = inputNode.offsetWidth; 101 var left = inputNode["offsetLeft"]; 102 var top = inputNode.offsetHeight+inputNode["offsetTop"]; 103 var popNode = document.getElementById("popDiv"); 104 popNode.style.border = "gray 0.5px solid"; 105 popNode.style.width = width+"px"; 106 popNode.style.top = top+"px"; 107 popNode.style.left = left+"px"; 108 document.getElementById("content_table").style.width=width+"px"; 109 110 } 111 112 </script> 113 </html>
后台部分:
1 package search_test; 2 3 import java.io.IOException; 4 import java.util.ArrayList; 5 import java.util.List; 6 7 import javax.servlet.ServletException; 8 import javax.servlet.http.HttpServlet; 9 import javax.servlet.http.HttpServletRequest; 10 import javax.servlet.http.HttpServletResponse; 11 12 13 import net.sf.json.JSONArray; 14 /** 15 * 模擬后台輸入關鍵字返回結果 16 * @author kingshing 17 * 18 */ 19 public class SearchServlet extends HttpServlet { 20 static private List<String> list = new ArrayList<String>(); 21 static{ 22 list.add("薛傻逼"); 23 list.add("薛之謙"); 24 list.add("凱逼"); 25 list.add("凱逼 是sb"); 26 list.add("ajax"); 27 list.add("ajax 教程"); 28 } 29 30 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 31 request.setCharacterEncoding("utf-8"); 32 response.setCharacterEncoding("utf-8"); 33 String keyword = request.getParameter("keyword"); 34 List<String> res = new ArrayList<String>(); 35 36 for (String string : list) { 37 if (string.contains(keyword)){ 38 res.add(string); 39 } 40 } 41 JSONArray jsonArray = JSONArray.fromObject(res); 42 System.out.println(jsonArray.toString()); 43 response.setContentType("text/html"); 44 response.getWriter().write(jsonArray.toString()); 45 } 46 }
相關包:
感謝你長得那么好看,還來這逛逛.
有問題歡迎指正!!!