關於三種帶搜尋下拉框的對比說明（searchableSelect、TinySelect、combobox)

_之遙發表於2018-09-05

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

相關文章