先上效果.
说明:这里重在前端实现,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 Listlist = new ArrayList (); 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 res = new ArrayList (); 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 }
相关包:
感谢你长得那么好看,还来这逛逛.
有问题欢迎指正!!!