下拉框搜尋外掛chosen
阿新 • • 發佈：2018-12-15
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試chosen外掛</title>
{#需要引入js、css檔案#}
<script src="{% static "components/jquery/dist/jquery.js" %}"></script>
<script src="{% static "components/chosen/chosen.jquery.js" %}"></script>
<link rel="stylesheet" href="{% static "components/chosen/chosen.css" %}"/>
<style>
{#隱藏搜尋框，F12檢視DOM#}
{% comment %}
.chosen-container-single .chosen-search input {
display: none;
}
{% endcomment %}
</style>
</head>
<body>
<select name="select_name" id="select_id" class="chosen-select">
<option value="0">中國</option>
<option value="1">加拿大</option>
<option value="2">美國</option>
<option value="3">法國</option>
</select>
</body>
</html>
<script>
var chosen_plugin = $('.chosen-select').chosen({
allow_single_deselect: true,//是否允許取消選擇
search_contains: true,//關鍵字模糊搜尋，設定為false，則只從開頭開始匹配
width: '50%',//下拉框寬度
no_results_text: "沒有找到結果！",//搜尋無結果時顯示的提示
max_selected_options: 6 //當select為多選時，最多選擇個數
});
{#change事件#}
chosen_plugin.change(function () {
$("#select_id").add(new Option("天國","4"));
});
{#動態更新select下的選擇項，只要在更新選擇項後觸發Chosen中的liszt:updated事件就可以了#}
chosen_plugin.trigger("liszt:updated");
</script>