Searchable Tags Input Component For Bootstrap 5

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 select or datalist element 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