转载 http://blog.csdn.net/u011439289/article/details/41848387
使用Autocomplete可以很简单的就有文本框的自动补全功能提示了。
在HTML文件中引入autocomplete的js文件和css样式文件,以及autocomplete压缩包中的jQuery的js文件,不要私自用高版本的jQuery,可能会导致显示不出效果。
先来从网友那里拷贝过来的最简单的例子:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>autocomplete</title>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
- <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css">
- <script type="text/javascript">
- var websites = [
- "Google", "NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",
- "Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
- ];
- $().ready(function () {
- $("#website").autocomplete(websites);
- });
- </script>
- </head>
- <body>
- <p>
- <label>Web Site:</label>
- <input type="text" id="website"/>
- <input type="button" id="getvalue" value="Get Value"/>
- </p>
- <div id="content"></div>
- </body>
- </html>
出来的效果如下:
缺点就是只能匹配前面的,不能匹配中间的,不知有没有相关的配置修改,且接着学下去再看看。
仔细的研究一下autocomplete( url or data, [options] )方法。
autocomplete方法有两个参数,第一个用来填写URL地址或是数据,jQuery Autocomplete插件是支持Ajax方式调用数据,所以可以填写调用的地址,另外可以直接填写数据,格式为JavaScript数组,如我们的例子,autocomplete的另外一个参数 [options]是一个可选项,我们在例子中就没有写,但这个参数里面却有很多可配置的参数,我们还是先修改上面的例子。
- $().ready(function () {
- $("#website").autocomplete(websites, {
- minChars: 0,
- max: 5,
- autoFill: true,
- mustMatch: true,
- matchContains: true,
- scrollHeight: 220,
- formatItem: function (data, i, total) {
- return "<I>" + data[0] + "</I>";
- }, formatMatch: function (data, i, total) {
- return data[0];
- }, formatResult: function (data) {
- return data[0];
- }
- });
- });
在options项我们增加了好几个参数
minChars表示在自动完成激活之前填入的最小字符,这里我们设置为0,在我们双击文本框,不输入字符的时候,就会把数据显示出来,效果如下:
max表示列表里的条目数,我们设置了5,所以显示5条,也如上图
autoFill表示自动填充,就是在文本框中自动填充符合条件的项目,看下图,在我们输入“g”的时候,文本框里填充了“google”。
mustMatch表示必须匹配条目,也就是在文本框里输入的内容,必须是data参数里的数据,如果不匹配,文本框就被清空
matchContains表示包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示,比如在上面的图中,我们输入了“g”,由于“Sogou”中也包含一个“g”,所以会显示出来,如果将matchContains设为fasle,则“Sogou”就不会显示
scrollHeight不用多解释,看文档就知道。
后面3个参数formatItem、formatMatch、formatResult非常有用,formatItem作用在于可以格式化列表中的条目,比如我们加了“I”,让列表里的字显示出了斜体,formatMatch是配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据,formatResult是定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据。
[options]里还有很多有用的参数,大家可以看它的文档。
本地json数据的自动补全:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>autocomplete</title>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
- <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css">
- <script type="text/javascript">
- var names = [
- {name:'li',age:23},
- {name:'huang',age:26},
- {name:'goof',age:45},
- {name:'link',age:67}
- ];
- $().ready(function() {
- $("#website").autocomplete(names,{
- minChars: 1,
- max: 5,
- autoFill: true,
- mustMatch: true,
- matchContains: true,
- scrollHeight: 220,
- formatItem: function(data, i, total) {
- return "<I>"+data.name+"</I>" + data.age;
- },
- formatMatch: function(data, i, total) {
- return data.name;
- },
- formatResult: function(data) {
- return data.name;
- }
- });
- });
- </script>
- </head>
- <body>
- <p>
- <label>Web Site:</label>
- <input type="text" id="website"/>
- <input type="button" id="getvalue" value="Get Value"/>
- </p>
- <div id="content"></div>
- </body>
- </html>
==================================================================
调用服务器端json数据,服务端用servlet来实现,json数据用fastjson来生成。上maven仓库下载fastjson这个jar包,当然生成json语句的jar不少,也可以用其他的。
编写一个转换为json的工具类:\src\com\lifeix\util\FastJsonUtil.java
这个类非常简单,如下:
- package com.lifeix.util;
- import com.alibaba.fastjson.JSON;
- /**
- * Created by lhx on 14-12-10 下午4:15
- *
- * @project jspProject
- * @package com.lifeix.util
- * @blog http://blog.csdn.net/u011439289
- * @email 888xin@sina.com
- * @Description
- */
- public class FastJsonUtil {
- /**
- * Object实体转换为json
- * @param object
- * @return
- */
- public static String object2json(Object object){
- JSON json = (JSON) JSON.toJSON(object);
- return json.toJSONString();
- }
- }
编写一个servlet:src\com\lifeix\servlet\JsonServlet.java,主要是输出json数据给前台。
- package com.lifeix.servlet;
- import com.lifeix.util.FastJsonUtil;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import java.io.IOException;
- import java.io.PrintWriter;
- import java.util.ArrayList;
- import java.util.HashMap;
- import java.util.List;
- import java.util.Map;
- /**
- * Created by lhx on 14-12-9 下午4:19
- *
- * @project jspProject
- * @package ${PACKAGE_NAME}
- * @blog http://blog.csdn.net/u011439289
- * @email 888xin@sina.com
- * @Description
- */
- public class JsonServlet extends HttpServlet {
- protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- PrintWriter pw = null;
- try {
- response.setContentType("application/json; charset=utf-8");
- response.setCharacterEncoding("UTF-8");
- response.setHeader("Cache-Control", "no-cache");
- pw = response.getWriter();
- List<Map<String, String>> list = new ArrayList<Map<String, String>>();
- Map<String,String> map = new HashMap<String, String>();
- map.put("name","Link");
- map.put("num", "34");
- list.add(map);
- map = new HashMap<String, String>();
- map.put("name","Li");
- map.put("num", "123");
- map = new HashMap<String, String>();
- map.put("name","Tom");
- map.put("num", "76");
- list.add(map);
- map = new HashMap<String, String>();
- map.put("name","Gnk");
- map.put("num","583");
- list.add(map);
- String jsonstr = FastJsonUtil.object2json(list);
- pw.print(jsonstr);
- pw.flush();
- }catch (Exception e) {
- e.printStackTrace();
- }
- finally {
- if (pw != null)
- pw.close();
- }
- }
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- this.doPost(request, response);
- }
- }
编写前台JavaScript代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title>autocomplete</title>
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
- <!--<script src="js/emails.js" type="text/javascript"></script>-->
- <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css">
- <script type="text/javascript">
- var names ;
- $(document).ready(function(){
- $.ajax({
- type:'POST',
- contentType: "application/json",
- url: "/jsonservlet",
- dataType: "json",
- success:function(data){
- names = data;
- autocompleteFn(data);
- }
- });
- });
- function autocompleteFn(names){
- $("#website").autocomplete(names,{
- minChars: 0,
- max: 5,
- dataType:"json",
- autoFill: true,
- mustMatch: true,
- matchContains: true,
- scrollHeight: 220,
- formatItem: function(data, i, total) {
- return "<I>"+data.name+"</I>" + " <font style='color: #009933; font-family: 黑体; font-style: italic'>次数:" + data.num + "</font>";
- },
- formatMatch: function(data, i, total) {
- return data.name;
- },
- formatResult: function(data) {
- return data.name;
- }
- });
- }
- </script>
- </head>
- <body>
- <p>
- <label>Web Site:</label>
- <input type="text" id="website"/>
- <input type="button" id="getvalue" value="Get Value"/>
- </p>
- <div id="content"></div>
- </body>
- </html>
这代码很容易理解,先用jQuery的ajax技术在页面加载的时候就从后台获取数据,缓存到names中,接着调用autocompletefn函数,把数据传到这个函数中,再调用autocomplete这个插件,页面在输入的时候就会有自动补全的功能了。
最后的效果为:
========================================================
单独的Autocomplete项目已经取消更新了,取而代之的是jQuery UI社区的Autocomplete,地址为:http://jqueryui.com/autocomplete/
在这个网页上,有个例子也非常简单,它能匹配中间的字符,特效也好点。我们可以直接拷贝代码放到自己的机器上运行,不过因为引用的js和css文件都是要联网下载的,所以要保证你的机器的在联网情况下才可以。
代码:
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery UI Autocomplete - Default functionality</title>
- <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
- <link rel="stylesheet" href="/resources/demos/style.css">
- <script>
- $(function() {
- var availableTags = [
- "ActionScript",
- "AppleScript",
- "Asp",
- "BASIC",
- "C",
- "C++",
- "Clojure",
- "COBOL",
- "ColdFusion",
- "Erlang",
- "Fortran",
- "Groovy",
- "Haskell",
- "Java",
- "JavaScript",
- "Lisp",
- "Perl",
- "PHP",
- "Python",
- "Ruby",
- "Scala",
- "Scheme"
- ];
- $( "#tags" ).autocomplete({
- source: availableTags
- });
- });
- </script>
- </head>
- <body>
- <div class="ui-widget">
- <label for="tags">Tags: </label>
- <input id="tags">
- </div>
- </body>
- </html>
后记:
本地调用json数据的时候,才想console出返回的数据,把formatItem、 formatMatch和formatResult这三个函数都舍去了return。结果就出现了以下的错误,害得我找了很久都不知什么原因。
最后发现是中间的formatMatch函数是不能舍去return语句的: