仿百度搜索框自动下拉提示

先上效果.

说明:这里重在前端实现,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 }

View Code

KingShing

仿百度搜索框自动下拉提示

说明:这里重在前端实现,js部分,这里输入a 弹出"ajax" 和"ajax 教程"只是后台集合模拟的数据.通过ajax返回到前端的与a匹配的数据.

公告