A dropdown component written in pure JavaScript - IE11+ compatible
Firstly, the script needs to be included in your HTML file. If you would like to personalize the Iconic Dropdown component, you can additionally include a CSS stylesheet with your custom CSS properties which target the Iconic Dropdown component classes. Also, do not forget to set customCss to true. (see configuration)
<head>
// Optional
<link rel="stylesheet" href="dropdown.css" type="text/css" />
</head>
<script src="dropdown.js" type="text/javascript"></script>Secondly, within your HTML file, create a <select> tag which you want to turn into a dropdown. Do not forget to set an id on your <select> tag.
<select id="foods">
<option value="bread">Bread</option>
<option value="cereal">Cereal</option>
<option value="pasta">Pasta</option>
<option value="rice">Rice</option>
<option value="meat">Meat</option>
<option value="fish">Fish</option>
</select>Finally, target the id of your <select> tag in the options and initialize the component with the .init() method. You may also specify further options. (see configuration)
<script type="text/javascript">
const dropdown = new IconicDropdown({
select: "#foods",
});
dropdown.init();
</script>| Option | Default | Type |
|---|---|---|
| customCss | false |
boolean |
| data | [] |
Object[] |
| noData | No data found. |
string |
| noResults | No results found. |
string |
| placeholder | Select... |
string |
| select* | none |
string |
| textField | null |
string |
| valueField | null |
string |
* This option is compulsory
If set to true, the component will not inject its own CSS in the <head> tag.
The component can be configured with data set in the configuration fields. It must be an Array of Objects.
Text to display if there is no data found in the <select> tag or in the data field.
Text to display if there is no results when the option list is filtered.
Text to display in the input placeholder.
The <select> tag from which the component is initialized.
The field of the data object that provides the text content.
The field of the data object that provides the value.
* IMPORTANT: When data is provided, valueField and textField should also be set.
<script type="text/javascript">
const dropdown = new IconicDropdown({
customCss: true,
data: [
{ valueName: "bread", itemName: 'Bread'},
{ valueName: "rice", itemName: 'Rice'},
{ valueName: "pasta", itemName: 'Pasta'}
],
noData: "No food item found.",
noResults: "No results found in this list.",
placeholder: "Select a food item...",
select: "#foods",
textField: 'itemName',
valueField: 'valueName',
});
</script>Initialize the component with all its settings.
Listen for all events.
Example:
JavaScript:
dropdown.subscribe(function(event) {
console.log(event);
});Console:
Object : { value: "AX", text: "Åland Islands" }Iconic Dropdown is an open-source project. Contributions of any kind are welcome and appreciated. Feel free to open an issue or request a feature. Pull requests are also welcome.
This project is open source and available under the MIT License.