🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

autocompleteDropdown is a jQuery plugin that transforms the normal select element into a searchable dropdown list just like the autocomplete input interface.

Autocomplete Drop-Down-list

Documentation

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


You May Also Like