Autocomplete Dropdown
What is it?
This is a small jQuery plugin to designed to allow you to search through huge dropdown lists such as country lists in a typeahead style.
An additional feature is the ability to add a value if that value doesn't exist in the dropdown, making it useful for all dropdowns!
Usage
Include the stylesheet in the header:
<link rel="stylesheet" href="dist/css/autocompleteDropdown.css" />
The add jQuery (if needed) and the script to the footer of your page:
<script src="jquery.1.11.min.js"></script> <script src="dist/js/autocompleteDropdown-min.js"></script>
To add autocompletion to any of your select dropdowns simply give them a class of autocomplete
:
<select class="autocomplete"> <option value="something">Something</option> </select>
On form submission the plugin will send across the options value the same as a standard dropdown. If you have added an option using the Add New function that option will send the text you had entered when you clicked Add.
Preselecting Values
To preselect a value is simple. When displaying the dropdown simply add the selected
to the option you require. This is useful for a page that includes multiple dropdown boxes with various contents.
<select class="autocomplete"> <option value="something" selected>Something</option> <option value="something-else">Something Else</option> <option value="another-thing">Another Thing</option> </select>
Placeholder text
You can specify your placeholder text in a number of ways. The easiest way it to add an option without a value
and add the class of label
.
<select class="autocomplete"> <option class="label">Search...</option> <option value="something">Something</option> <option value="something-else">Something Else</option> <option value="another-thing">Another Thing</option> </select>
The other option is to add a global placeholder text, this is done when initiating the plugin itself.
$('select').autocompleteDropdown({ customPlaceholderText: "Search...", });
Plugin Options
Most options have to be set globally when initiating the plugin, however a select few can be set on a select dropdown itself using data-* attributes.
$('select').autocompleteDropdown({ customPlaceholderText: "Search...", wrapperClass: 'autocomplete-dropdown', inputClass: 'acdd-input', allowAdditions: true, noResultsText: 'No results found', onChange: function() { window.console.log('select has changed'); }, onSelect: function() { window.console.log('an option has been selected'); }, });
Options Details
Option | Type | Default | Description |
---|---|---|---|
customPlaceholderText | String | false | Global text added to each autocomplete input field as placeholder text. |
wrapperClass | String | autocomplete-dropdown | Class used to target styles for the dropdown (Note: if this is changed the included stylesheet will need updating. |
inputClass | String | null | Class used to enable style targeting of the autocomplete input field. |
allowAdditions | Boolean | true | Allow additions to the select field. |
noResultsText | String | No results found | If allow additions is false, this is shown in place of the "Add ***" option. |
onChange | Function | null | Add callback function to the select field onChange function. |
onSelect | Function | null | Add a callback to the click of the "Add ***" link. Only applicable if allowAdditions is set to true |
Credit
Built and maintained by Lee Jones [email protected] MIT License