 |
| Searchable Custom Dropdown List Plugins With jQuery |
dropdownsearchlist.js is a custom jQuery select plugin that takes an array of select objects and can turn them into a custom dropdown list with filterable functionality.
This Plugin can help you in long list of options, where users can easily browse through the options in the dropdown list by typing in the search field.
How to use it:
1. Add the jQuery dropdownsearchlist.js plugin's files to the page.
<link href="/path/to/jquery.dropdownsearchlist.css" rel="stylesheet" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/jquery.dropdownsearchlist.js"></script>
2. Add the Font Awesome iconic font to the page. OPTIONAL. You can override the default dropdown and search icons in the jquery.dropdownsearchlist.js.
<link href="/path/to/font-awesome.min.css" rel="stylesheet" />
3. Create an empty container to hold the searchable dropdown list.
<div id="example"> </div>
4. Define your options in a JS array as follows:
var items = [
{
"id": "1",
"name": "jQuery"
},{
"id": "2",
"name": "Script"
},{
"id": "3",
"name": "Net"
},
// more options here
];
5. Initialize the plugin and populate the dropdown list with the data you provide.
$("#example").createddsearchlist({
payload: items,
});
6. Get the selected option using the onChange callback.
$("#example").createddsearchlist({
payload: items,
onChange: function (ev, data) {
console.log(data);
console.log(data.id);
console.log(data.name);
}
});
7. More plugin options to customize the dropdown list.
$("#example").createddsearchlist({
instanceName: "wheelerware",
defaultText: "Select an item",
defaultId: null,
fontSize: "14px",
label: "", // e.g. "my list"
searchPosition: "top", // or "bottom"
});
Live Demo
See the Pen Create An Interactive Credit Card Form With jQuery by Teguh Sigit (@teguhsigit) on CodePen.
File Info
- File Name :
- custom-searchable-dropdown-list.zip
- Size :
- 23.77KB
- Site Download :
- Mediafire.com
- Official Website:
- Go to website
- License:
- MIT