下拉搜尋框
阿新 • • 發佈:2019-01-11
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、參考資料