使用简介
一、创建文本框,其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导入即可测试
引自:http://www.devbridge.com/projects/autocomplete/jquery/
1 楼
shakar
2012-04-19
2 楼
29120406
2012-06-15
如果输入b的话,查询不出来Liberiag,只能查从开始第一个字母开始的数据,有没有什么好的方法来改进
3 楼
夜曲6763
2012-06-15
刚开始报jquery-1.4.2.min.js拒绝访问,允许通过域访问数据源之后,什么效果也没有。