jQuery自动完成插件autocompleter

所属分类:输入-自动完成

 159820  413  查看评论 (30)
分享到微信朋友圈
X
jQuery自动完成插件autocompleter ie兼容6

使用方法:

添加引用

最低要求:jquery.autocompleter.css和jquery.autocompleter.min.js。


脚本:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.autocompleter.min.js" type="text/javascript"></script>


样式:

<link rel="stylesheet" href="css/jquery.autocompleter.css">


定义你的autocompleter:

$(function () {
    $('input').autocompleter({ source: 'path/to/get_data_request' });
});


或用于本地JSON来源:

var data = [
    { "value": "1", "label": "one" },
    { "value": "2", "label": "two" },
    { "value": "3", "label": "three" }
];
$(function () {
    $('input').autocompleter({ source: data });
});

如果你不会在源对象定义了一个值,标签将被用作后选择在输入字段的默认值。


方法:

插件后更改选项的定义:

$('#input').autocompleter('option', data);


例如:

$('#input').autocompleter('option', {
    limit: 5,
    template: '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}'
});


开放列表:

$('#input').autocompleter('open');


关闭页面:

$('#input').autocompleter('close');

摧毁插件:

$('#input').autocompleter('destroy');


清除所有缓存:

$.autocompleter('clearCache');


设置默认值:

$.autocompleter('defaults', {
    customClass: 'myClassForAutocompleter'
});


例如:

Autocompleter第一名称输入缓存,匹配强调限制和5的结果。


形式:

<label for="gender_male">Male</label>
<input type="radio" name="gender" value="male" id="gender_male" checked="checked" />
<label for="gender_female">Female</label>
<input type="radio" name="gender" value="female" id="gender_female" />
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" />


JavaScript:

$(function () {
    $("#firstname").autocompleter({
        limit: 5,
        cache: true,
        combine: function () {
            var gender = $("input:radio[name=gender]:checked").val();
            return {
                gender: gender
            };
        },
        callback: function (value, index) {
            console.log( "Value "+value+" are selected (with index "+index+")." );
        }
    });
});


主要结构:

<div class="autocompleter" id="autocompleter-1">
    <ul class="autocompleter-list">
        <li class="autocompleter-item">First</li>
        ...
        <li class="autocompleter-item">Last</li>
    </ul>
</div>
相关插件-自动完成

angular.js购物车

基于angularjs实现的购物车,搜索、删除、购物结算功能全
  自动完成
 28605  306

输入框自动提示,字母小写转大写

输入框输入车牌号,根据首字母自动提示车牌所属省份信息,并能自动字母小写转大写,限制输入长度
  自动完成
 29033  315

jQuery移动端购物车功能(原创)

jQuery移动端购物车结算
  自动完成
 26714  353

仿淘宝选择商品计算价格

同一个商品有不同的版本,最后选择后计算出价格
  自动完成
 36811  492

讨论这个项目(30)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    小小白先森℡ 0
    2020/10/10 16:03:12
    提示Cannot read property 'replace' of undefined , (at _buildList (jquery.autocompleter.js:417)
    417 行是,label = data.highlightMatches ? label.replace(highlightReg, "<strong>$&</strong>") : label;
    打印都是有数据的
    URL数据返回也都是正确的😥😥😥 回复
    シ逆耳旋律丶寂如流年╂ 0
    2020/4/29 10:30:28
    数据太多,想要加滚动条怎么加? 回复
    C ? ?? 0
    2019/12/11 16:37:57

    Uncaught TypeError: Cannot read property 'toUpperCase' of undefined  怎么这么多bug。。。。。。,switch循环那里

    if (source[item].label.toUpperCase().search(query) === 0) {
        response.push(source[item]);
        source[item];
    }

    数组找完了还往下面找就报错啊

    回复
      0
    2019/8/19 16:49:55
    清除缓存好像没有什么作用 回复
    qinaction 0
    2018/11/28 18:41:55
    callback: function(value, index, selected) {
        if (selected) {
            console.log("sdfsdfdsfdsf55555");
        }
    }

    回调好像不管用

    回复
    Jackson_M 0
    2018/10/26 11:10:53
    超出滑动的时候,点击滑动条也关闭了弹出,怎么解决 回复
    漫行 0
    2018/9/9 21:25:49
    大芒果 0
    2018/4/2 18:18:17
    貌似检索不了中文 回复
    逍遥剑客 0
    2018/3/26 18:32:12
    这个插件很强大 支持内容检索效果不错 回复
    麦芽糖x 0
    2017/1/10 10:01:47

    为什么点击Delete键在onChange中会吧select给隐藏呢?有什么深意吗?

        麦芽糖x0
        2017/1/10 10:01:13

        在用Delete删除内容后就再点击文本框不会出现下拉列表了?怎么个情况,是我用的不对吗?

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复