自动上拉框，仿百度 _Web前端

自动下拉框，仿百度

下面给大家分享下自己的拙作，希望大家多点评下。

本网站前端采用的JSP，后台为Servlet模块。

数据库采用流行的MySQL。

在实现功能之前，应该了解一下基本的原理。

首先是要知道对表单的输入框的响应事件。

Javascript中有onpropertychange(IE支持)和oninput(FF等)

对于IE来说，可以这样来实现:

[javascript] view plaincopyprint?

<script?type="text/javascript">??
document.getElementById('myinput').attachEvent('onpropertychange',function(o){??????
????????if(o.propertyName?=='value')?{??
????????????//doSth??ex.?alert(myinput.value); ??
????????????}??
????????????});??
</script>??

<script type="text/javascript">
document.getElementById('myinput').attachEvent('onpropertychange',function(o){    
      	if(o.propertyName =='value') {
      		//doSth  ex. alert(myinput.value);
      		}
      		});
</script>

对于非IE浏览器，如Google Chrome,可以利用下面的代码:

[javascript] view plaincopyprint?

<script?type="text/javascript">??
document.getElementById('myinput').addEventListener(?"input",function(o)?{??
????????????//doSth ??
????????????//?ex.?alert(myinput.value);???????????????????? ??
????????????},false);??
</script>??

<script type="text/javascript">
document.getElementById('myinput').addEventListener( "input",function(o) {
			//doSth
        	// ex. alert(myinput.value);  				  	
  		  	},false);
</script>

这样，我们就可以动态地取得用户输入的内容。通过AJAX的异步交互，将信息传递给Servlet处理，

Servlet连接数据库，得到匹配的信息,返回给页面。

在数据库中，可以这样模糊查询:

[sql] view plaincopyprint?

SELECT?*?FROM?table_name?WHERE?column_name?=?'content%';??

SELECT * FROM table_name WHERE column_name = 'content%';

如果匹配多个字符则用"%"，单个字符用"_"。

**************************************************************************************

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?中文乱码问题

另外，由于我们是利用JS取得用户的数据，因此如果含有中文信息会乱码，

我们可以利用JS里的函数库来处理乱码内容:

encodeURI()?或者 ? ??encodeURIComponent(uriComponent)

（调用一次还是会乱码，网上有人说要两次掉要该方法就可以解决问题，即encodeURI(encodeURI()))

在Servlet对得到的信息解码:

URLDecoder.decode(request.getParameter("msg","UTF-8"));

这样，我们就解决了中文乱码问题.

***************************************************************

整个流程大概如下：

下面给出一些关键代码:

首先是数据库:

创建数据库:

[sql] view plaincopyprint?

CREATE?DATABASE?autoComplete;??

CREATE DATABASE autoComplete;

接着创建表:

[sql] view plaincopyprint?

Create?Table:?CREATE?TABLE?`hotwords`?(??
??`id`?int(11)?NOT?NULL?AUTO_INCREMENT,??
??`msg`?text,??
??PRIMARY?KEY?(`id`)??
)?ENGINE=InnoDB?AUTO_INCREMENT=10?DEFAULT?CHARSET=utf8??

Create Table: CREATE TABLE `hotwords` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `msg` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8

再随机插入一些数据：

如图:

[plain] view plaincopyprint?

mysql>?select?*?from?hotwords;??
+----+---------+??
|?id?|?msg?????|??
+----+---------+??
|??1?|?china???|??
|??2?|?chinese?|??
|??3?|?cake????|??
|??4?|?cub?????|??
|??5?|?chaos???|??
|??6?|?chicken?|??
|??7?|?陈旭????|??
|??8?|?陈龙????|??
|??9?|?陈滟龙??|??
+----+---------+??
9?rows?in?set?(0.00?sec)??

mysql> select * from hotwords;
+----+---------+
| id | msg     |
+----+---------+
|  1 | china   |
|  2 | chinese |
|  3 | cake    |
|  4 | cub     |
|  5 | chaos   |
|  6 | chicken |
|  7 | 陈旭    |
|  8 | 陈龙    |
|  9 | 陈滟龙  |
+----+---------+
9 rows in set (0.00 sec)

接下来是JSP页面:

index.jsp:

[html] view plaincopyprint?

<%@?page?contentType="text/html;?charset=UTF-8"?%>??
<html>??
????<head>??
????????<title>自动提示框</title>??
????<style?type="text/css">??
????.mystyle??
????{?background:white?none?repeat?scroll?0?0;??
??????border:1px?solid?black;??
??????cursor:default;??
??????font-size:13px;??
??????line-height:17px;??
??????margin:0;??
??????z-index:99;???
??????width:150px;??
??????left:10px;??
??????top:10px;???
??????visibility:?hidden;??
??????}??
????</style>??
????</head>??
????<body>??
??
????????<img?src="pics/baidu_sylogo1.gif"/>??
????????<form>??
????????????<input?type="text"?name="myinput"?id="myinput"?autocomplete="off"/>??
??
????????????<input?type="submit"?value="百度一下"?/>??
????????</form>??
??????????
????????????????????<div?id="aaa"?class="mystyle"></div>??
????</body>??
????<script?type="text/javascript">?????
????<!--??????
????????var?xmlHttp;?//XMLHttpRequest对象??
??????????
????????//判断浏览器类型??
????????function?isIE()?{??
????????if(navigator.userAgent.indexOf(?"MSIE")>0)?{??
????????return?true;??
????????}??
????????}??
??????????
????????//定义表单内容改变事件??
????????if(isIE())?{??
????????document.getElementById('myinput').attachEvent('onpropertychange',function(o){??????
????????if(o.propertyName?=='value')?{??
????????????var?msg?=?document.getElementById('myinput').value;?//取得用户输入实时信息??
????????????getContent(msg);??
??????????
????????}??
????});???
????}?else?{??
????????????document.getElementById('myinput').addEventListener(?"input",function(o)?{??
????????????var?msg?=?document.getElementById('myinput').value;?//取得用户输入实时信息??
????????????getContent(msg);??????????????
????????????},true);??
????}??
????????//创建XMLHttpRequest对象?????
????????function?createXMLHttp()?{??
????????????if(window.ActiveXObject)??
????????????xmlHttp?=?new?ActiveXObject("Msxml2.XMLHTTP");??
????????????else???
????????????xmlHttp?=?new?XMLHttpRequest();??
????????}??
??????????
????????//向服务器取数据??
????????function?getContent(msg)?{??
????????????createXMLHttp();??
????????????var?url?=?encodeURI(encodeURI("query.do?msg="?+?msg));??
????????????xmlHttp.open("POST",url,true);??
????????????xmlHttp.onreadystatechange?=?function()?{??
????????????????if(xmlHttp.readyState?==?4)?{??
????????????????????if?(xmlHttp.responseText?==?'')??
????????????????????????document.getElementById("aaa").style.visibility?=?'hidden';??
????????????????????else{??
????????????????????????document.getElementById("aaa").style.visibility?=?'visible';??
????????????????????????document.getElementById("aaa").innerHTML?=?xmlHttp.responseText;??
????????????????}???
??????????????????????
????????????????}??
????????????};??
????????????xmlHttp.send();??
????????}??
??????????
????//-->?????
????</script>???
</html>???

<%@ page contentType="text/html; charset=UTF-8" %>
<html>
	<head>
		<title>自动提示框</title>
	<style type="text/css">
	.mystyle
	{ background:white none repeat scroll 0 0;
	  border:1px solid black;
	  cursor:default;
	  font-size:13px;
	  line-height:17px;
	  margin:0;
	  z-index:99; 
	  width:150px;
	  left:10px;
	  top:10px; 
	  visibility: hidden;
	  }
	</style>
	</head>
	<body>

		<img src="pics/baidu_sylogo1.gif"/>
		<form>
			<input type="text" name="myinput" id="myinput" autocomplete="off"/>

			<input type="submit" value="百度一下" />
		</form>
		
					<div id="aaa" class="mystyle"></div>
	</body>
	<script type="text/javascript">   
	<!--    
		var xmlHttp; //XMLHttpRequest对象
		
		//判断浏览器类型
		function isIE() {
		if(navigator.userAgent.indexOf( "MSIE")>0) {
		return true;
		}
		}
		
		//定义表单内容改变事件
		if(isIE()) {
 	 	document.getElementById('myinput').attachEvent('onpropertychange',function(o){    
      	if(o.propertyName =='value') {
      		var msg = document.getElementById('myinput').value; //取得用户输入实时信息
      		getContent(msg);
      	
      	}
  	}); 
  	} else {
  		  	document.getElementById('myinput').addEventListener( "input",function(o) {
        	var msg = document.getElementById('myinput').value; //取得用户输入实时信息
      		getContent(msg);		  	
  		  	},true);
  	}
  		//创建XMLHttpRequest对象   
  		function createXMLHttp() {
  			if(window.ActiveXObject)
  			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  			else 
  			xmlHttp = new XMLHttpRequest();
  		}
  		
  		//向服务器取数据
  		function getContent(msg) {
  			createXMLHttp();
  			var url = encodeURI(encodeURI("query.do?msg=" + msg));
  			xmlHttp.open("POST",url,true);
  			xmlHttp.onreadystatechange = function() {
  				if(xmlHttp.readyState == 4) {
  					if (xmlHttp.responseText == '')
  						document.getElementById("aaa").style.visibility = 'hidden';
  					else{
    					document.getElementById("aaa").style.visibility = 'visible';
  						document.getElementById("aaa").innerHTML = xmlHttp.responseText;
  				} 
  					
  				}
  			};
  			xmlHttp.send();
  		}
  		
	//-->   
	</script> 
</html>

再来是Servlet

QueryServlet.java:

[java] view plaincopyprint?

import?java.io.IOException;??
import?java.io.PrintWriter;??
import?java.net.URLDecoder;??
import?java.sql.Connection;??
import?java.sql.DriverManager;??
import?java.sql.PreparedStatement;??
import?java.sql.ResultSet;??
import?java.sql.SQLException;??
??
import?javax.servlet.ServletException;??
import?javax.servlet.http.HttpServlet;??
import?javax.servlet.http.HttpServletRequest;??
import?javax.servlet.http.HttpServletResponse;??
??
public?class?QueryServlet?extends?HttpServlet?{??
??
????private?static?final?long?serialVersionUID?=?1L;??
??
????public?void?doPost(HttpServletRequest?request,?HttpServletResponse?response)??
????????????throws?ServletException,?IOException?{??
??
????????request.setCharacterEncoding("UTF-8");??
????????response.setContentType("text/html;charset=UTF-8");??
????????PrintWriter?out?=?response.getWriter();??
??
????????String?msg?=?request.getParameter("msg");??
????????String?decoded_msg?=?URLDecoder.decode(msg,"UTF-8");??
????????System.out.println(decoded_msg);??
????????getContent(decoded_msg,?out);??
????}??
??
????public?static?Connection?getConnection()?{??
????????Connection?conn?=?null;??
????????try?{??
????????????Class.forName("com.mysql.jdbc.Driver");??
??
????????????conn?=?DriverManager.getConnection(??
????????????????????"jdbc:mysql://localhost:3306/autocomplete",?"root",??
????????????????????"your?password");??
??
????????????return?conn;??
????????}?catch?(ClassNotFoundException?cnfe)?{??
????????????cnfe.printStackTrace();??
????????????return?null;??
????????}?catch?(SQLException?e)?{??
????????????e.printStackTrace();??
????????????return?null;??
????????}??
????}??
??
????public?static?void?getContent(String?msg,?PrintWriter?out)?{??
????????Connection?conn?=?null;??
????????PreparedStatement?pstmt?=?null;??
????????ResultSet?rs?=?null;??
????????if?(?!msg.equals(""))?{??
????????????System.out.println(msg);??
????????????String?sql?=?"select?*?from?hotwords?where?msg?like?'"?+?msg?+?"%'";??
????????????System.out.println(sql);??
??
????????????try?{??
??
????????????????conn?=?getConnection();??
????????????????pstmt?=?conn.prepareStatement(sql);??
????????????????rs?=?pstmt.executeQuery();??
??
????????????????while?(rs.next())?{??
????????????????????out.print(rs.getString("msg")?+?"<br/>");??
????????????????}??
??
????????????}?catch?(SQLException?e)?{??
????????????????e.printStackTrace();??
????????????}finally?{??
????????????????try{??
????????????????????if(rs?!=?null)?{??
????????????????????????rs.close();??
????????????????????}??
????????????????????if(pstmt?!=?null)?{??
????????????????????????pstmt.close();??
????????????????????}??
????????????????????if(conn?!=?null)?{??
????????????????????????conn.close();??
????????????????????}??
????????????????}catch(SQLException?e)?{??
????????????????????e.printStackTrace();??
????????????????}??
????????????}??
??
????????}??
????}??
????//删除内容 ??
????public?static?boolean?deleteContent(String?msg)?{??
????????Connection?conn?=?null;??
????????PreparedStatement?pstmt?=?null;??
????????????System.out.println(msg);??
????????????String?sql?=?"delete?*?from?hotwords?where?msg?=?";??
??
????????????try?{??
??
????????????????conn?=?getConnection();??
????????????????pstmt?=?conn.prepareStatement(sql);??
????????????????pstmt.setString(1,msg);??
??????????????????
????????????????int?n?=?pstmt.executeUpdate();??
??????????????????
????????????????if?(?n?>?0)?{??
????????????????????return?true;??
????????????????}else?{??
????????????????????return?false;??
????????????????}??
??
????????????}?catch?(SQLException?e)?{??
????????????????e.printStackTrace();??
????????????????return?false;??
????????????}finally?{??
????????????????try{??
????????????????????if(pstmt?!=?null)?{??
????????????????????????pstmt.close();??
????????????????????}??
????????????????????if(conn?!=?null)?{??
????????????????????????conn.close();??
????????????????????}??
????????????????}catch(SQLException?e)?{??
????????????????????e.printStackTrace();??
????????????????}??
????????????}??
??
??????????
??????????
????}??
}??

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class QueryServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();

		String msg = request.getParameter("msg");
		String decoded_msg = URLDecoder.decode(msg,"UTF-8");
		System.out.println(decoded_msg);
		getContent(decoded_msg, out);
	}

	public static Connection getConnection() {
		Connection conn = null;
		try {
			Class.forName("com.mysql.jdbc.Driver");

			conn = DriverManager.getConnection(
					"jdbc:mysql://localhost:3306/autocomplete", "root",
					"your password");

			return conn;
		} catch (ClassNotFoundException cnfe) {
			cnfe.printStackTrace();
			return null;
		} catch (SQLException e) {
			e.printStackTrace();
			return null;
		}
	}

	public static void getContent(String msg, PrintWriter out) {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		if ( !msg.equals("")) {
			System.out.println(msg);
			String sql = "select * from hotwords where msg like '" + msg + "%'";
			System.out.println(sql);

			try {

				conn = getConnection();
				pstmt = conn.prepareStatement(sql);
				rs = pstmt.executeQuery();

				while (rs.next()) {
					out.print(rs.getString("msg") + "<br/>");
				}

			} catch (SQLException e) {
				e.printStackTrace();
			}finally {
				try{
					if(rs != null) {
						rs.close();
					}
					if(pstmt != null) {
						pstmt.close();
					}
					if(conn != null) {
						conn.close();
					}
				}catch(SQLException e) {
					e.printStackTrace();
				}
			}

		}
	}
	//删除内容
	public static boolean deleteContent(String msg) {
		Connection conn = null;
		PreparedStatement pstmt = null;
			System.out.println(msg);
			String sql = "delete * from hotwords where msg =?";

			try {

				conn = getConnection();
				pstmt = conn.prepareStatement(sql);
				pstmt.setString(1,msg);
				
				int n = pstmt.executeUpdate();
				
				if ( n > 0) {
					return true;
				}else {
					return false;
				}

			} catch (SQLException e) {
				e.printStackTrace();
				return false;
			}finally {
				try{
					if(pstmt != null) {
						pstmt.close();
					}
					if(conn != null) {
						conn.close();
					}
				}catch(SQLException e) {
					e.printStackTrace();
				}
			}

		
		
	}
}

最后贴一个web.xml:

[html] view plaincopyprint?

<?xml?version="1.0"?encoding="UTF-8"?>??
<web-app?version="2.5"???
????xmlns="http://java.sun.com/xml/ns/javaee"???
????xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"???
????xsi:schemaLocation="http://java.sun.com/xml/ns/javaee???
????http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">??
??<display-name></display-name>??
??<servlet>??
????<servlet-name>QueryServlet</servlet-name>??
????<servlet-class>QueryServlet</servlet-class>??
??</servlet>??
??
??<servlet-mapping>??
????<servlet-name>QueryServlet</servlet-name>??
????<url-pattern>/query.do</url-pattern>??
??</servlet-mapping>??
??<welcome-file-list>??
????<welcome-file>index.jsp</welcome-file>??
??</welcome-file-list>??
</web-app>??

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>QueryServlet</servlet-name>
    <servlet-class>QueryServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>QueryServlet</servlet-name>
    <url-pattern>/query.do</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

大功告成，下面看一下效果：

IE9:

Google Chrome:

（数据库用户名和密码可以在QueryServlet.java类里改)

(别忘了在类库里添加MySQL驱动包)

(整个web项目放在资源里,供大家分享)

至于百度的图片，呵呵，自己去官网索取吧。