jQuery下拉框可搜索插件Selectivity.js

所属分类:输入-选择框

 51681  336  查看评论 (23)
分享到微信朋友圈
X
jQuery下拉框可搜索插件Selectivity.js ie兼容10

具体使用方法,演示文件中有详细说明。

相关插件-选择框

Bootstrap Switch 开关控制插件

Bootstrap 开关(switch)控件
  选择框
 77952  354

仿去哪儿网城市选择

旅游网站可借鉴
  选择框
 40063  341

jQuery左右选择切换

左右选择切换,兼容主流浏览器
  选择框
 50515  357

仿造中国移动商城联动筛选特效

商城筛选特效,分类页
  选择框
 42854  481

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

    梦想怪 0
    2020/8/20 16:35:53
    怎么设置默认选中哪一个 回复
    j_coding 0
    2020/7/25 19:55:22
    还有鼠标移动到下拉框的时候,鼠标指针有时候会变成竖杠,这样点开下拉框就会立马自动关闭,这应该是个BUG 回复
    j_coding 0
    2020/7/25 19:54:13
    $('#aaa').selectivity({
        allowClear: true,
        // multiple:true,
        items: ['Amsterdam', 'Antwerp', 'Amsterdam1', 'Antwerp1', 'Antwerp2', 'Amsterdam2', 'Antwerp3'],
        placeholder: '请选择'
    });

    这个下拉框只能显示value,不能填key的吗?

        j_coding0
        2020/7/25 20:01:41
        哦,找到方法了,items:[ { id: 54, text: 'Vienna' } ] 用这种格式可以带入key
    回复
    kulmao 1
    2020/2/21 15:00:40

    修改成统一获取方式,增加显示值的办法:

    $("#example-4").on("change", function(e) {
        alert("暗码值:" + e.value + "  显示值:" + e.text)
    });

    760行增加text:

    change: ['added', 'removed', 'value', 'text'],

    4754行改成:

    var data = assign({
        value: this._value,
        text: this._data.text
    }, options);
    回复
    男人不可以穷?? 0
    2019/12/14 16:23:42
    默认选项怎么显示 回复
    一将功成万骨枯 0
    2019/9/2 11:24:57
    第一个单个选择搜索怎么设置值啊,比如text:李四,他的id也是李四,设置items,也设置不了
        一将功成万骨枯0
        2019/9/2 11:34:51
        哦,解决了,格式不对
    回复
    Boring游鱼 1
    2019/1/8 15:11:12

    总结上面大佬结论大体写法如下:

    $("#aaa").on("change", function(e){
         var val = $('#aaa').selectivity('value');
    });

    通过onchange事件触发后获取到的val就是当前选项的值,可以写一个隐藏的input存进去

    回复
    得之吾幸 ????? 2
    2018/12/13 14:55:34

    关于大数据量十万条数据以上:采用异步分页加载

    // 初始化 下拉框模糊查询 
    $('#programList').selectivity({
        allowClear: true,
        ajax: {
            url: '${ctx}/vod_day/programList',
            minimumInputLength: 2, // 输入最少2个字符进行搜索
            quietMillis: 500,
            params: function(term, offset) {
                return {
                    // input 输入的参数
                    vodName: term,
                    pageNum: 1 + Math.floor(offset / 100) // 分批加载  每次100条
                };
            },
            fetch: function(url, init, queryOptions) {
                return $.ajax(url).then(function(data) {
                    return {
                        results: $.map(data.programList, function(item) {
                            return {
                                id: item.id,
                                text: item.text
                            };
                        }),
                        // 总条数 > 当前条数 + 已加载条数     为true 继续发送请求  
                        more: (data.total_count > queryOptions.offset + data.programList.length)
                    };
                });
            }
        },
        placeholder: '搜索节目名称',
        templates: {
            resultItem: function(item) {
                return (
                    '' +
                    '' + escape(item.text) + '' +
                    ''
                );
            }
        }
    });
    回复
    A*A*A 0
    2018/8/22 11:26:14
    ie11不兼容???
        Maggiechueng940
        2018/12/14 16:03:49
        把特殊字符注释掉就可以兼容了
        bingganlen1
        2019/8/30 15:08:00
        右键--检查元素 把selectivity-jquery.js 控制台报错的所有字符全部注释掉
        ?: 'G' //?: 'H', 像这种的 //注释即可 差不多连续操作10来次
        男人不可以穷??0
        2019/12/16 15:34:15
        你好,请问默认选项的 高亮显示 怎么设置
    回复
    ??Bonnie・ 0
    2018/8/9 16:58:33
    怎么设置选取默认选项?
        艾小喵0
        2018/8/16 14:31:27
        https://www.bootcdn.cn/Selectivity.js/ 所有问题都在这里
        $('#obj').selectivity('data', { id: 2, text: 'value' }); //id是key text是value
        男人不可以穷??0
        2019/12/16 15:34:59
        你好,请问默认选项的 高亮显示 怎么设置
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复