技術標籤：javascriptjqueryhtmlcss

1. 引入js

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
 

也可以進行下載到本地（下載連結如下):

（1）演示demo -->http://indrimuska.github.io/jquery-editable-select/

(2)下載地址：-->https://github.com/indrimuska/jquery-editable-select

(3)npm安裝地址：-->https://www.npmjs.com/package/jquery-editable-select

2.select程式碼實現

<div class="form-group">
		<label class="col-sm-3 control-label">工單編號：</label>
		<div class="col-sm-8" >
					<select th:id="editable-select" class="form-control m-b"  name="jobListNumber" >
					<option th:each="asset:${listKey}" th:value="${asset.id}" th:text="${asset.jobListNumber}" ></option>
					</select>
				</div>
			</div>
 

3.js程式碼快

$('#editable-select').editableSelect({
			filter:	true,
			effects: 'slide', //下拉列表出來的方式
			duration: 'fast',//時間

		});

4.說明

• 選項設定

• filter：過濾，即當輸入內容時下拉選項會匹配輸入的字元，支援中文，true/false，預設true。
• effects：動畫效果，當觸發彈出下拉選擇框時的下拉框展示過渡效果，有default，slide，fade三個值，預設是default。
• duration：下拉選項框展示的過渡動畫速度，有fast，slow，以及數字（毫秒），預設是fast。

• 事件

• onCreate：當輸入時觸發。
• onShow：當下拉時觸發。
• onHide：當下拉框隱藏時觸發。
• onSelect：當下拉框中的選項被選中時觸發。

5.效果展示