关于三种带搜索下拉框的对比说明（searchableSelect、TinySelect、combobox)

searchableSelect

实测缺点

1. 在搜索中无法进行精准搜索，只允许进行模糊搜索
2. 存在多个搜索结果时在列表中标记显示，无法进行全部显示，用户体验不佳
3. 不支持onchange事件，但是在属性中提供了替代onchange的属性

使用说明

1.第一步：引入css文件和js文件

  <link  href="<c:url value="/public/lib/jquery/jquery.searchableSelect.css" />"  rel="stylesheet" />
  <script   src="<c:url value="/public/lib/metronic/assets/global/plugins/jquery.min.js" />"></script>
  <script src="<c:url value="/public/lib/jquery/jquery.searchableSelect.js" />"></script>

2.第二步：准备html结构

 <select id="searchSelect">
     <option value="text1">text1</option>
     <option value="text2">text2</option>
     <option value="text3">text3</option>
 </select> 

3.第三步：实例化插件

   $("#searchSelect").searchableSelect();
   $("#searchSelect").searchableSelect({
       afterSelectItem:function(){}
   })

说明：插件不支持onchange事件，如果想要执行值改变事件，在实例化的时候实现

文件下载地址

searchableSelect Download

TinySelect

实测缺点

• 搜索框的样式是基于实例化后的select进行绝对定位，在直接引用时偶尔会存在样式错乱问题
• 当加载的数据比较多时，以2000条搜索数据为准，搜索时间大约3-5秒，搜索机制较慢

优点

• 有完整的API文档，当加载的搜索数据不多且需要对数据进行大量的操作的时候推荐使用。

使用说明

1.第一步：引入必要的js和css文件

  <link  href="<c:url value="/public/lib/jquery/TinySelect.min.css" />"  rel="stylesheet" />
  <script src="<c:url value="/public/libTinySelect.min.js" />"></script>

2.第二步：准备dom元素

 <select id="tinySelect">
     <option value="text1">text1</option>
     <option value="text2">text2</option>
     <option value="text3">text3</option>
 </select> 

3.第三步：实例化插件

 tinySelect("#tinySelect",data);

特别说明：
* 动态加载数据时使用的dom是

* 动态加载的数据格式为[{id:”id值 “,value:” 数据”}]

文件下载及官方文档

TinySelect Download

easyui组件下的combobox组件

缺点：

* 没有基本的API文档，只适合对数据进行搜索，不适合大量对数据进行处理

优点：

* 动态加载数据速度比较快，在触发点击事件时试试进行实例化即可
* 数据搜索快，且支持模糊搜索和精准搜索，搜索结果可在一起进行显示

使用说明：
1.引入必要的文件

      <link rel="stylesheet" href="<c:url value="/public/lib/easyui/easyui.css" />" type="text/css">
      <link rel="stylesheet" href="<c:url value="/public/lib/easyui/icon.css" />" type="text/css">
      <script src="<c:url value="/public/lib/jquery/jquery-1.12.1.min.js"/>"></script>
      <script src="<c:url value="/public/lib/easyui/jquery.easyui.min.js" />" type="text/javascript"></script>

2.准备select元素

    <select class="tinySelect">
       <option value="1">1</option >
       <option value="2">2</option >
       <option value="3">3</option >
   </select>

3.实例化插件

$(”.tinySelect“).combobox();//简单初始化
$(“.tinySelect”).combobox({value:"初始化数据"});//设置初始化时默认数据
$(".tinySelect").combobox({url:"../getData",value:"初始化数据",editable:false});//加载远程数据，且select不可编辑

说明：
提供获取数据的接口
onSelect:function(){} //值改变事件
onLoadSuccess：function(){}//初始化成功事件
$(this).combobox(getData)[0]；//获取到第一个选项的数据
动态加载数据时注意返回数据的格式，建议采用通过ajax获取数据，动态生成option标签append到select后，进行初始化的方式。

文件下载及官方文档

comboboxDownload