完美解决searchableselect不支持change事件的方法

大家都知道，原生的select框很丑很丑，于是我们开发的时候通常会选择第三方插件。searchableselect.js就是这么一个插件，功能强大，还支持搜索框模糊搜索，废话不多说，上图。

image.png

但是呢，这个插件是不支持select的change事件的，所以用到级联效果的时候会很头疼。网上搜了很多，都没有可行的方案，于是自己开始尝试去解决这个问题。

其实，解决方法也挺简单，在插件作用下，原本的select框隐藏了，取而代之的是div的点击事件模拟select的选中事件，下面是主要逻辑代码：

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);

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

上面的this.element就是被隐藏的select，所以，我们在模拟选中事件里面补上select的change事件就好了。jquery有一个trigger方法，能够模拟事件触发，所以，我们完整的解决代码如下：

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.trigger('change'); //模拟select触发change事件
      if(this.options.afterSelectItem){
        this.options.afterSelectItem.apply(this);
      }
    }

至此，问题就解决了，我们可以愉快的使用searchableselect了。