jquery 下拉框插件,實現智能補全,模糊搜索,多選

時間 2019-12-12

原文原文鏈接

近期已朋友問我問題,實現相似淘寶百度的下啦搜索條,看了網上好多帖子,都看起來好複雜,並且引用了好多沒用的東西,並且多選選擇內容多以後容易樣式奔潰,javascript

無奈之下只好本身改了,css

話很少說上效果圖:html

模糊搜索廣會自動補全全部帶廣的下拉選項.每一個選中的能夠單獨刪除.java

大神勿噴,給須要的朋友個幫助,話很少說,上代碼:jquery

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
　　<title>下拉框自動補全多選模糊搜索</title>
　　<link rel="stylesheet" href="chosen.css">
　　<style type="text/css" media="all">
　　　　/* fix rtl for demo */
　　　　.chosen-rtl .chosen-drop { left: -9000px; }
　　</style>
</head>
<body>
　　<form>
　　　　<div id="container">
　　　　　　<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" style="width:350px;" tabindex="18" id="multiple-label-example">
　　　　　　　　
　　　　　　</select>
　　　　</div>
　　<script src="jquery-1.8.2.min.js"></script>//引入jqyery
　　<script src="chosen.jquery.js"></script>//下拉框控件js
　　<script type="text/javascript"> //設置下拉框屬性
　　　　var config = {
　　　　'.chosen-select' : {},
　　　　'.chosen-select-deselect' : {allow_single_deselect:true},
　　　　'.chosen-select-no-single' : {disable_search_threshold:10},
　　　　'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
　　　　'.chosen-select-width' : {width:"95%"}
　　　　}
　　for (var selector in config) {
　　　　$(selector).chosen(config[selector]);
　　}
　　</script> <script type="text/javascript"> json

　　　　 $.get("http://localhost:6625/interface/CityAdd/AreaAdd.ashx?MethodName=GetProvince",//獲取後臺json數據
　　　　　　function (data) {
　　　　　　　　debugger;
　　　　　　　　var d = $.parseJSON(data); 獲取後天 json 數據
　　　　　　　　//alert(d);
　　　　　　　　for (var i = 0; i < d.length; i++) {
　　　　　　　　$('#multiple-label-example').append //循環select option值
　　　　　　　　(
　　　　　　　　　　'<option value="' + d[i].pro_number + '">' + d[i].pro_cname + '</option>' //動態添加open
　　　　　　　　);
　　　　　　　　　　$("#multiple-label-example").trigger("liszt:updated"); //綁定數據記得寫此方法,否則綁定無效 multiple-label-example 爲 select id;
　　　　　　　　}
　　　　　});app