jQuery Autocomplete 自动补全功能

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

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

HTML文件中引入autocompletejs文件和css样式文件,以及autocomplete压缩包中的jQueryjs文件,不要私自用高版本的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,在我们双击文本框

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值