jQuery Autocomplete 自动补全功能

使用Autocomplete可以很简单的就有文本框的自动补全功能提示了。

HTML文件中引入autocompletejs文件和css样式文件,以及autocomplete压缩包中的jQueryjs文件,不要私自用高版本的jQuery,可能会导致显示不出效果。

先来从网友那里拷贝过来的最简单的例子:

<span style="font-size:24px;"><!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></span>

出来的效果如下:

缺点就是只能匹配前面的,不能匹配中间的,不知有没有相关的配置修改,且接着学下去再看看。

仔细的研究一下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个参数formatItemformatMatchformatResult非常有用,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 [email protected]
 * @Description
 */
public class FastJsonUtil {
    /**
     * Object实体转换为json
     * @param object
     * @return
     */
    public static String object2json(Object object){
        JSON json = (JSON) JSON.toJSON(object);
        return json.toJSONString();
    }
}

编写一个servletsrc\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 [email protected]
 * @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>

这代码很容易理解,先用jQueryajax技术在页面加载的时候就从后台获取数据,缓存到names中,接着调用autocompletefn函数,把数据传到这个函数中,再调用autocomplete这个插件,页面在输入的时候就会有自动补全的功能了。

最后的效果为:

========================================================

单独的Autocomplete项目已经取消更新了,取而代之的是jQuery UI社区的Autocomplete,地址为:http://jqueryui.com/autocomplete/

在这个网页上,有个例子也非常简单,它能匹配中间的字符,特效也好点。我们可以直接拷贝代码放到自己的机器上运行,不过因为引用的jscss文件都是要联网下载的,所以要保证你的机器的在联网情况下才可以。

代码:

<!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、            formatMatchformatResult这三个函数都舍去了return。结果就出现了以下的错误,害得我找了很久都不知什么原因。


最后发现是中间的formatMatch函数是不能舍去return语句的:


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。