jQuery Autocomplete 自動補全功能

阿新 • • 發佈：2019-01-20

使用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 [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();
    }
}

編寫一個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 [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>

這程式碼很容易理解，先用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語句的：

jQuery Autocomplete 自動補全功能

jQuery Autocomplete 自動補全功能

Jquery實現自動補全功能

【輸入智慧提示功能】PHP+jQuery實現自動補全功能

jquery的輸入框自動補全功能+ajax

開啟mac terminal 命令/路徑自動補全功能

第三百六十八節，Python分布式爬蟲打造搜索引擎Scrapy精講—elasticsearch(搜索引擎)用Django實現搜索的自動補全功能

pycharm代碼自動補全功能

【easyui-combobox】下拉菜單自動補全功能，Ajax獲取遠程數據源

Mac上git自動補全功能

Eclipse自動補全功能輕松設置

eclipse自動補全功能的缺陷

kubectl命令自動補全功能

在eclipse中設定編碼自動補全功能

微信小程式搜尋框自動補全功能

PySide QLineEdit自動補全功能

Eclipse中的文字自動補全功能（Java、html、javascript）

jquery 郵箱自動補全

jQuery模擬自動補全

讓vim支援c++程式碼自動補全功能。

jquery ui 自動補全demo

jQuery Autocomplete 自動補全功能

相關推薦