jQuery Autocomplete 自动补全功能

最新推荐文章于 2024-10-09 09:32:41 发布

小新8

最新推荐文章于 2024-10-09 09:32:41 发布

阅读量8.6k

点赞数 2

分类专栏： web 文章标签： jquery jquery ui json

本文链接：https://blog.csdn.net/u011439289/article/details/41848387

版权

本文介绍了如何使用jQuery Autocomplete实现自动补全功能，包括从本地JSON数据和服务器端获取数据。通过设置不同参数，如minChars、max、autoFill等，可以定制化补全效果。同时，文章提到jQuery UI的Autocomplete提供了更丰富的功能，支持中间字符匹配。

摘要由CSDN通过智能技术生成

使用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，在我们双击文本框