[英]Adding New Option If Search Are Not Exist In Bootstrap-Select
我現在有了新的javascript庫或插件,我喜歡它,非常酷,而且易於使用。 這是Silvio Moreto進行的引導選擇 。 但是,現在我正在尋找一種在“實時搜索不匹配”的情況下使用實時搜索時在選擇中創建,添加或添加新選項的方法。
在https://www.electrictoolbox.com/javascript-add-options-html-select/上相同,但有一點不同,我希望按鈕位於搜索框中,並且可以保存到數據庫中
我在下面使用以下代碼:
$('.selectpicker').selectpicker({ style: 'btn-default', width:'100%' });
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script> <select class="selectpicker" data-live-search="true" > <option data-tokens="Hotdog" value="Hotdog">Hot Dog</option> <option data-tokens="Burger" value="Burger">Burger</option> <option data-tokens="Sugar" value="Sugar">Sugar</option> <option data-tokens="Donut" value="Sugar">Donut</option> </select>
我想像這樣:
這將引導您達到理想的結果,自行應用css可能會幫助您
$("#tags").select2({ tags: true, createTag: function (params) { return { id: params.term, text: params.term, newOption: true } }, templateResult: function (data) { var $result = $("<span></span>"); $result.text(data.text); if (data.newOption) { $result.append(" <em>(new)</em>"); } return $result; } });
#tags { width: 200px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <select id='tags'> <option value="test">Test</option> </select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.