jQuery Autocomplete 自动补全功能

来源：互联网发布：8051单片机实践与应用编辑：程序博客网时间：2024/05/16 09:18

使用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语句的：

0 0