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