A (very) simple jQuery + Bootstrap autocomplete plugin, using Boostrap Dropdowns.
Supports arrows navigation, Esc to close and Enter/Return to confirm.

Summary

• Requirements
• Usage
• Localization
• Options
• Data-Options
• Events
• Theming
• Known issues
• Consider supporting me

Requirements

(Back to top)

This is a jQuery and Bootstrap oriented plugin.
So, naturally, you'll need jQuery and Bootstrap.

NOTE: I believe you would be able to (very easily) adapt this plugin to your needs.

Usage

(Back to top)

$("SELECTOR").autofill({}) // {} = options

Localization

(Back to top)

You can extend the plugin's $.fn.autofill.lang object for translating.

;(function ($) {
	$.fn.autofill.lang = {
		emptyTable: "Nichts zu empfehlen...", // Google translate
		processing: "Wird bearbeitet...", // Google translate
	}
})(jQuery) // encapsulating jQuery is a good practice

NOTE: No RTL support.

Options

(Back to top)

Option	Type	Default	Description
debug	Boolean	false	Logs some actions into the console.
autofillSelection	Boolean	true	Fills the <input> once a suggestion is picked.
itemsLimit	Int	5	Limit of items shown.
datasetURL	String	""	AJAX URL.
datasetMethod	String	"GET"	AJAX method.
datasetPostData	Object	{}	Extra data to send during the AJAX call. Automatically adds the q key with the <input> value.
datasetHeaders	Object	{ }	Headers to send during the AJAX call.
datasetFormatting	NULL/Function	null	Used to filtering results of the AJAX call. Useful when using external/custom APIs.
minCharacters	Int	3	Minimum character length before suggestions are processed.
minDelay	Int	250	Minimum delay before AJAX suggestions are processed.
onLoading	NULL/Function	null	Triggered before the AJAX call.
onUpdate	NULL/Function	null	Triggered when suggestions are added to the pool.
onSelect	NULL/Function	null	Triggered when a suggestion is either clicked or selected with Enter or Return.
onEmpty	NULL/Function	null	Triggered when no suggestions were found.
onError	NULL/Function	null	Triggered on AJAX error.
darkMode	Boolean	false	Adds the .dropdown-menu-dark class (native Bootstrap) to the dropdown.
fullWidth	Boolean	true	Makes the .dropdown-menu wull width. Nice for mathcing the <input> width.
values	Array	[]	Values to be used.

Data-Options

(Back to top)

Some options can be added via data-autofill- attribute.
Setting a data-autofill- attribute will overwrite the Options above.

Option	Type	Default	Description
autofillselection	Boolean	true	Fills the <input> once a suggestion is picked.
itemslimit	Int	5	Limit of items shown.
dataseturl	String	""	AJAX URL.
datasetmethod	String	"GET"	AJAX method.
values	String	""	Values to be used. Separated by |.

Events

(Back to top)

Option	Description
autofill-loading	Triggered before the AJAX call.
autofill-update	Triggered when suggestions are added to the pool.
autofill-selected	Triggered when a suggestion is either clicked or selected with Enter or Return.
autofill-empty	Triggered when no suggestions were found.
autofill-error	Triggered on AJAX error.

Theming

(Back to top)

• 📃 The <ul> element has a (hopefully) unique .autofill-dropdown-menu class.
• 🔤 The <input> element has a (hopefully) unique .autofill-input class.

Known issues

(Back to top)

• 🙅🏼‍♀️ Not fully tested.
• 🐛 Weird behavior when using .disabled elements and arrows navigation.
• 🐭 If you try to be funny, by clicking and pressing Enter/Return at the same time, your mouse will take priority.
• 🌇 I made this in a couple hours and to fulfill personal needs. Expect the unexpected.

Consider supporting me

(Back to top)

• Buy me a coffee
• Follow me on Twitter
• Follow me on Twitch
• Join my Discord
• Get sub emotes on my channel