jQuery文本框输入自动提示，类似百度搜索效果

使用简介
一、创建文本框，其id为query

<input type="text" name="q" id="query" />

二、加入js文件

<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/jquery.autocomplete.js"></script>

三、加入级联样式表(css文件)

<link href="<%=basePath%>css/css.css" rel="stylesheet" type="text/css" />

其代码如下：

.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:6px 0 0 6px; /* IE6 fix: */ _background:none; _margin:1px 0 0 0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; overflow:hidden; }
.autocomplete strong { font-weight:normal; color:#3399FF; }

四、产生json数据并返回

package servlet;

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;

public class JqueryAuto extends HttpServlet {

	private static final long serialVersionUID = -3735305758332148214L;

	public JqueryAuto() {
		
	}

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

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		/*
		 * 返回数据格式必须是json数据，如下所示，本次重点不是json，不做json转换，使用土办法实现
		 * { 
			query:'Li', 
			suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'], 
			data:['LR','LY','LI','LT']
		   }
		 * */
		String keyWord = request.getParameter("query");//获取的属性必须是“query”，这是jquery插件规定的
		
		System.out.println("关键是："+keyWord);
		
		StringBuilder sb = new StringBuilder();
		sb.append("{");
		sb.append("query:'"+keyWord+"',");
		/*下面一行中的4个数据一般是通过查询关键子keyWord从数据库中获取,本次则模拟静态数据
		 * 本次模拟的是输入关键字‘Li’产生的数据，但本次只是为了做范例，所以无论输入什么关键字，都将在浏览器中显示下面的4个数据
		 * */
		sb.append("suggestions:['Liberiag','Libyan Arab Jamahiriyaz','Liechtensteinf','Lithuania'],");
		/*下面一行数据是推荐关键字,可要可不要，建议不要，占网速啊*/
		sb.append("data:['LR','LY','LI','LT']");
		sb.append("}");
		
		out.write(sb.toString());
	}

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

}

五、输入关键字'Li'测试，其效果如下



提示：可直接下载附件，解压后用myeclipse导入即可测试

Ajax AutoComplete for jQuery

jquery autocomplete插件结合ajax使用demo

评论

5 楼 mywhy 2014-08-25  

什么也测试不出来啊

4 楼 levin8088 2012-08-20  

3 楼 夜曲6763 2012-06-15  

刚开始报jquery-1.4.2.min.js拒绝访问，允许通过域访问数据源之后，什么效果也没有。

2 楼 29120406 2012-06-15  

如果输入b的话，查询不出来Liberiag，只能查从开始第一个字母开始的数据，有没有什么好的方法来改进

1 楼 shakar 2012-04-19