1、前言
開發中使用了一種下拉搜尋的插件，感覺簡單好用就記錄下來，以備日後使用。
2、示例及說明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉搜尋</title>
<link rel="stylesheet" href="js/chosen/chosen.css" />
</head>
<body>
<!--
data-placeholder:類似于是input标簽的placeholder，沒有值的使用顯示。
-->
<select data-placeholder="選擇城市" class="select-chosen">
<!-- 隻用第一個option值為空的時候才會顯示data-placeholder的值，否則顯示第一個option的值 -->
<option value=""></option>
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">深圳</option>
<option value="4">西安</option>
<option value="5">寶雞</option>
<option value="6">商洛</option>
<option value="7">銅川</option>
<option value="8">安康</option>
<option value="9">渭南</option>
<option value="10">遼甯</option>
<option value="11">大連</option>
<option value="12">南京</option>
<option value=13"">杭州</option>
<option value=14"">西甯</option>
</select>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/chosen/chosen.jquery.min.js" ></script>
<script type="text/javascript">
$(function(){
//給select标簽綁定下拉搜尋事件（可自定義參數，具體參考官方文檔）
$(".select-chosen").chosen({
no_results_text: "沒有找到搜尋的結果!",//沒有搜到結果時顯示的值
width: "250px",//下拉選框的寬度
allow_single_deselect: true //選擇後允許編輯
});
});
</script>
</html>
3、效果展示
4、注意事項
下載下傳依賴的js後，需要引入js、css還有兩張png圖檔，如下圖：
5、參考資料
-
官方資料
源碼下載下傳：https://github.com/harvesthq/chosen
js下載下傳：https://harvesthq.github.io/chosen/
文檔參考：https://harvesthq.github.io/chosen/options.html
- 技術部落格：http://blog.csdn.net/xiaozhu0301/article/details/46646035