Minimal Select Box Replacement – Iconic Dropdown

Category: Form , Javascript | May 27, 2021
Author:sidneywm
Views Total:548 views
Official Page:Go to website
Last Update:May 27, 2021
License:MIT

Preview:

Minimal Select Box Replacement – Iconic Dropdown

Description:

Iconic Dropdown is a minimal custom select JavaScript library that replaces the native select box with a good-looking, filterable dropdown.

How to use it:

1. Import the minified version of the Iconic Dropdown library into the document.

<script src="dist/dropdown.min.js"></script>

2. Initialize the Iconic Dropdown on the existing select element and done.

<select id="country">
  <option value="AF">Afghanistan</option>
  <option value="AX">Åland Islands</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  ... more options ...
</select>
var dropdown = new IconicDropdown({
    select: "#country"
});
dropdown.init();

3. You can also define the data in an array of JS objects as follows:

var dropdown = new IconicDropdown({
    select: "#country",
    data: [
      { valueName: "GB", itemName: 'UK'}, 
      { valueName: "VU", itemName: 'Vanuatu'}, 
      { valueName: "YE", itemName: 'Yemen'}
    ],
    textField: 'itemName',
    valueField: 'valueName',
});

4. Customize the placeholder text.

var dropdown = new IconicDropdown({
    select: "#country",
    placeholder: "Select A Country"
});

5. Customize the feedback text.

var dropdown = new IconicDropdown({
    select: "#country",
    noData: "No data.",
    noResults: "No results found.",
});

You Might Be Interested In:


Leave a Reply