评论：带搜索框的jQuery下拉框美化插件 searchable  [查看原文]

请问如何导入文件中有js和插件库,然后调用方法，求详细步骤？

寅弟090
2017/12/9 15:45:07

请问如何导入文件中有js和插件库,然后调用方法，求详细步骤？

海边@怀念0
2018/12/14 15:09:34
不会好好说话吗？

其他还好，在iphone手机使用iphone 自带输入法进行输入，没有效果（iphone安装的其他输入法可以用），是不是iphone自带输入法 判断输入完成与其他的输入法不同？

????0
2017/10/17 16:21:06

同样问题

哈欠~1
2017/10/27 13:49:57

$.expr[":"].searchableSelectContains = $.expr.createPseudo(function(arg) {
   if(typeof(arg)=='undefined')
      arg='';
    return function( elem ) {
      return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
  });

他没有判断空值，补上就好了

寅弟090
2017/12/9 15:47:03

请问如何导入文件中有js和插件库,然后调用方法，求详细步骤？

，，1
2018/9/20 16:43:58

show: function() {
    this.input.val(''); /*每次点击清空搜索内容*/
    this.items.find('.searchable-select-item').removeClass('searchable-select-hide'); /*让元数据显示*/
    this.down.removeClass('searchable-select-hide');
    this.input.focus();
    this.status = 'show';
    this.setPriviousAndNextVisibility();
},

在show函数中添加注释的两句就是清空input和回复数据

请问选中的时候怎么获取value啊？？

多个这种下拉菜单放一起，会遮挡的问题，怎么解决？？？？？？

shall1
2017/8/25 17:30:48

刚刚解决了，加2句，看注释处；

show: function() {
    this.dropdown.removeClass('searchable-select-hide');
    this.input.focus();
    this.status = 'show';
    this.setPriviousAndNextVisibility();
    this.dropdown.css('z-index', 100); //打开下拉列表时调高z-index层级  
}, hide: function() {
    if (!(this.status === 'show')) return;
    if (this.items.find(':not(.searchable-select-hide)').length === 0) this.input.val('');
    this.dropdown.addClass('searchable-select-hide');
    this.searchableElement.trigger('focus');
    this.status = 'hide';
    this.dropdown.css('z-index', 1); //关闭下拉列表时恢复z-index层级  
},

Y0
2017/11/27 11:56:41
还是没有解决 能更详细些么

凌乱_小青年0
2018/1/2 10:55:39

单纯修改z-index是不行的，其实是文档流的脱离问题。

待0
2018/1/7 14:22:17

js克隆出来的新select，点击没有效果。求大神解答，把下边的源码click改为live不可用，请问该如何修改？

this.searchableElement.click(function(event) {
    // event.stopPropagation();    
    _this.show();
}).on('keydown', function(event) {
    if (event.which === 13 || event.which === 40 || event.which == 38) {
        event.preventDefault();
        _this.show();
    }
});

安静一会0
2018/6/21 15:08:26
厉害了，可以用！！！

我那么想你、不许不理我0
2019/2/15 15:02:17
需要引入作者的js文件

不支持change事件啊，想二级联动用不了了

JiaoMingQiu0
2017/9/27 10:32:11
联动的问题解决了吗？求告诉

黑蛹0
2017/11/9 10:05:37

解决了吗

请问 这个插件怎么设置默认选中项?

3.5后的0
2018/1/2 14:50:46

你好！问题解决了吗，我也在找怎么设置默认选种值

施瓦兹1
2017/7/12 14:17:59

在css文件中

搜索.searchable-select-dropdown字段

增加z-index:1;试试

.searchable-select-dropdown {
  position: absolute;
  z-index:1;
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 4px;
  border-top: none;
  top: 28px;
  left: 0;
  right: 0;
}

阿三0
2017/8/21 11:41:11

加z-index:1;并没有什么用，有两个下拉框的话还是会被遮挡

龙叶0
2018/3/29 17:08:09
把 position: absolute; 这个注释掉就可以 不过会把其他框抵下去

ie11设置浏览器兼容性后，上一个下拉框列出的内容会被下一个下拉框遮挡，这个怎么解决？

见你，人群中0
2017/6/28 15:03:45

遮挡解决了吗

给力！

挺好的额

//退格稍改了一下  这个插件很给力的

filter: function() {
    var text = this.input.val();
    if (text.replace(/\s/g, "").length > 0) {
        this.items.find('.searchable-select-item').addClass('searchable-select-hide');
        this.items.find('.searchable-select-item:searchableSelectContains(' + text + ')').removeClass('searchable-select-hide');
        if (this.currentSelectedItem.hasClass('searchable-select-hide') && this.items.find('.searchable-select-item:not(.searchable-select-hide)').length > 0) {
            this.hoverFirstNotHideItem();
        }
        this.setPriviousAndNextVisibility();
    } else {
        $(".searchable-select-items").html("");
        this.buildItems();
    }
}

zh0
2017/5/9 14:51:37

//onchange是无效 我在js中buildItems 加了点击事情 也可以达成点击之后的效果var item = $('<div class="searchable-select-item" data-value="' + $(this).attr('value') + '" onclick="ChosenOne(this)">' + $(this).text() + '</div>');

丑人哆作怪0
2017/5/26 15:17:49

可以在selectItem 中设置完select的值之后显式触发change，即可监听onchange

selectItem: function(item){
      if(this.hasCurrentSelectedItem())
        this.currentSelectedItem.removeClass('selected');

      this.currentSelectedItem = item;
      item.addClass('selected');

      this.hoverItem(item);

      this.holder.text(item.text());
      var value = item.data('value');
      this.holder.data('value', value);
      this.element.val(value);
      this.element.change();//触发onchange

      if(this.options.afterSelectItem){
        this.options.afterSelectItem.apply(this);
      }
    }

zh0
2017/6/14 8:47:58

好

阿三0
2017/8/21 14:09:48

加单击没用

xiaoxiaohuang0
2018/5/7 16:52:20
太厉害了！根本不会用！

xiaoxiaohuang0
2018/5/7 17:05:23
大神你太厉害了！！！！！

宋朝0
2018/7/2 13:20:31
大神你太厉害了！！！！！

Re: CREATORS0
2018/8/21 18:15:36
大佬，这种方法会一直触发chang时间，有什么办法能点击的时候才触发吗

偏导护盾0
2018/9/12 17:25:19
这种方式第一次打开页面触发事件