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

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.", });