Press "Enter" to skip to content

Better Select Box Widgets in Vanilla Javascript

Select is a regular JavaScript library that enhances the default selection box with direct search, multi-select, and auto-complete capabilities.

multiple select dropdown, multiselect dropdown, multiple select dropdown with checkbox in html, jquery multiselect dropdown, jquery multiselect dropdown example

Mobile Support

This library works on a mobile phone. However, the usability set on a mobile phone is usually much better than that on a desktop. So it is recommended to use this on desktop only.

Roadmap

  • refactor constructor args
  • dynamic option creation
  • localization
  • allowClear
  • tokenSeparators

How to make use of it:

1. Import the required JavaScript and CSS files into the doc.

<link rel="stylesheet" href="./select.css" />
<script src="./select.js" type="module"></script>

2. Add the data-select attribute to the choice factor and the library will handle the remainder.

<select data-select>
  ...
</select>
<select multiple data-select>
  ...
</select>

3. Convert an input area right into a choose dropdown, and connect an autocomplete listing to it utilizing the datalist aspect:

<input type="text" list="datalist">
<datalist id="datalist">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</datalist>

Enhanced Select Box, Select Plugin/Github, fast select, multiple select dropdown jquery, fast select algorithm


See Demo And Download

Official Website(xi): Click Here

This superior jQuery/javascript plugin is developed by xi. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.