| Author: | ecmel |
|---|---|
| Views Total: | 2,471 views |
| Official Page: | Go to website |
| Last Update: | March 20, 2023 |
| License: | MIT |
Preview:
Description:
A tags input component for Bootstrap 5 that converts options you selected in a select or datalist element into tags.
How it works:
- Transforms a regular
selectordatalistelement into a tags input. - Show suggestions in a dropdown when typing something in the tags input.
- Displays the selected options as tags/tokens inside the tags input.
How to use it:
1. Load the necessary Bootstrap 5 framework in the document.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
2. Load the stylesheet select.css and JavaScript select.js.
<link href="select.css" rel="stylesheet" /> <script src="select.js"></script>
3. Initialize the select.js component.
<div id="city" class="form-control select">
<input id="city_input" type="text" data-bs-toggle="dropdown" />
<div class="dropdown-menu"></div>
<select name="city" multiple hidden>
<option value="01">ADANA</option>
<option value="02">ADIYAMAN</option>
<option value="03">AFYONKARAHİSAR</option>
<option value="04">AĞRI</option>
<option value="05">AMASYA</option>
<option value="06">ANKARA</option>
<option value="07">ANTALYA</option>
<option value="08">ARTVİN</option>
<option value="09">AYDIN</option>
<option value="10">BALIKESİR</option>
<option value="11">BİLECİK</option>
<option value="12">BİNGÖL</option>
<option value="13">BİTLİS</option>
<option value="14">BOLU</option>
<option value="15">BURDUR</option>
<option value="16">BURSA</option>
<option value="17">ÇANAKKALE</option>
<option value="18">ÇANKIRI</option>
<option value="19">ÇORUM</option>
<option value="20">DENİZLİ</option>
<option value="21">DİYARBAKIR</option>
<option value="22">EDİRNE</option>
<option value="23">ELAZIĞ</option>
<option value="24">ERZİNCAN</option>
<option value="25">ERZURUM</option>
<option value="26">ESKİŞEHİR</option>
<option value="27">GAZİANTEP</option>
<option value="28">GİRESUN</option>
<option value="29">GÜMÜŞHANE</option>
<option value="30">HAKKARİ</option>
<option value="31">HATAY</option>
<option value="32">ISPARTA</option>
<option value="33">MERSİN</option>
<option value="34">İSTANBUL</option>
<option value="35">İZMİR</option>
<option value="36">KARS</option>
<option value="37">KASTAMONU</option>
<option value="38">KAYSERİ</option>
<option value="39">KIRKLARELİ</option>
<option value="40">KIRŞEHİR</option>
<option value="42">KONYA</option>
<option value="43">KÜTAHYA</option>
<option value="44">MALATYA</option>
<option value="45">MANİSA</option>
<option value="46">KAHRAMANMARAŞ</option>
<option value="47">MARDİN</option>
<option value="48">MUĞLA</option>
<option value="49">MUŞ</option>
<option value="50">NEVŞEHİR</option>
<option value="51">NİĞDE</option>
<option value="52">ORDU</option>
<option value="53">RİZE</option>
<option value="54">SAKARYA</option>
<option value="55">SAMSUN</option>
<option value="56">SİİRT</option>
<option value="57">SİNOP</option>
<option value="58">SİVAS</option>
<option value="59">TEKİRDAĞ</option>
<option value="60">TOKAT</option>
<option value="61">TRABZON</option>
<option value="62">TUNCELİ</option>
<option value="63">ŞANLIURFA</option>
<option value="64">UŞAK</option>
<option value="65">VAN</option>
<option value="66">YOZGAT</option>
<option value="67">ZONGULDAK</option>
<option value="68">AKSARAY</option>
<option value="69">BAYBURT</option>
<option value="70">KARAMAN</option>
<option value="71">KIRIKKALE</option>
<option value="72">BATMAN</option>
<option value="73">ŞIRNAK</option>
<option value="74">BARTIN</option>
<option value="75">ARDAHAN</option>
<option value="76">IĞDIR</option>
<option value="77">YALOVA</option>
<option value="78">KARABÜK</option>
<option value="79">KİLİS</option>
<option value="80">OSMANİYE</option>
<option value="81">DÜZCE</option>
</select>
</div>document
.querySelectorAll(".select")
.forEach((el) => new bootstrap5.Select(el));4. It also works with multiple select.
<div id="place" class="form-control select" data-mutable>
<input id="place_input" type="text" data-bs-toggle="dropdown" />
<div class="dropdown-menu"></div>
<select name="place" multiple hidden>
<option value="01">ADANA</option>
<option value="02">ADIYAMAN</option>
<option value="03">AFYONKARAHİSAR</option>
<option value="04">AĞRI</option>
<option value="05">AMASYA</option>
<option value="06">ANKARA</option>
<option value="07">ANTALYA</option>
<option value="08">ARTVİN</option>
<option value="09">AYDIN</option>
<option value="10">BALIKESİR</option>
<option value="11">BİLECİK</option>
<option value="12">BİNGÖL</option>
<option value="13">BİTLİS</option>
<option value="14">BOLU</option>
<option value="15">BURDUR</option>
<option value="16">BURSA</option>
<option value="17">ÇANAKKALE</option>
<option value="18">ÇANKIRI</option>
<option value="19">ÇORUM</option>
<option value="20">DENİZLİ</option>
<option value="21">DİYARBAKIR</option>
<option value="22">EDİRNE</option>
<option value="23">ELAZIĞ</option>
<option value="24">ERZİNCAN</option>
<option value="25">ERZURUM</option>
<option value="26">ESKİŞEHİR</option>
<option value="27">GAZİANTEP</option>
<option value="28">GİRESUN</option>
<option value="29">GÜMÜŞHANE</option>
<option value="30">HAKKARİ</option>
<option value="31">HATAY</option>
<option value="32">ISPARTA</option>
<option value="33">MERSİN</option>
<option value="34">İSTANBUL</option>
<option value="35">İZMİR</option>
<option value="36">KARS</option>
<option value="37">KASTAMONU</option>
<option value="38">KAYSERİ</option>
<option value="39">KIRKLARELİ</option>
<option value="40">KIRŞEHİR</option>
<option value="42">KONYA</option>
<option value="43">KÜTAHYA</option>
<option value="44">MALATYA</option>
<option value="45">MANİSA</option>
<option value="46">KAHRAMANMARAŞ</option>
<option value="47">MARDİN</option>
<option value="48">MUĞLA</option>
<option value="49">MUŞ</option>
<option value="50">NEVŞEHİR</option>
<option value="51">NİĞDE</option>
<option value="52">ORDU</option>
<option value="53">RİZE</option>
<option value="54">SAKARYA</option>
<option value="55">SAMSUN</option>
<option value="56">SİİRT</option>
<option value="57">SİNOP</option>
<option value="58">SİVAS</option>
<option value="59">TEKİRDAĞ</option>
<option value="60">TOKAT</option>
<option value="61">TRABZON</option>
<option value="62">TUNCELİ</option>
<option value="63">ŞANLIURFA</option>
<option value="64">UŞAK</option>
<option value="65">VAN</option>
<option value="66">YOZGAT</option>
<option value="67">ZONGULDAK</option>
<option value="68">AKSARAY</option>
<option value="69">BAYBURT</option>
<option value="70">KARAMAN</option>
<option value="71">KIRIKKALE</option>
<option value="72">BATMAN</option>
<option value="73">ŞIRNAK</option>
<option value="74">BARTIN</option>
<option value="75">ARDAHAN</option>
<option value="76">IĞDIR</option>
<option value="77">YALOVA</option>
<option value="78">KARABÜK</option>
<option value="79">KİLİS</option>
<option value="80">OSMANİYE</option>
<option value="81">DÜZCE</option>
</select>
</div>Changelog:
v0.0.16 (03/20/2023)
- Add support for datalist
See Also:
Easy Tags Input Component For Bootstrap 5/4 – Tags.js
Multi-Select Dropdown for Bootstrap 5 – select-checklist
Customizable Tag/Chip Style Inputs For Bootstrap 5 – use-bootstrap-tag
Bootstrap 5 & Material Design UI KIT
Dynamic Bootstrap 5 Modal Windows via AJAX – loadmodal.js
Easy Autocomplete Library For Bootstrap 5 – autocompleteBS
Bootstrap 5 Theme with shadcn/ui Aesthetics – Shadstrap
Enhance The Accessibility Of Bootstrap 5 When Hight Contrast Is Activated On Windows