Documentation and examples for adding custom Autocomplete with CSS and JavaScript.
This component was born with the purpose of preventing multiple elements from being loaded several times through ajax.
My problem was to have 2 combos with the same 10,000 elements. My solution was to load the elements to be used in the component once and reuse them. No need to render them all in HTML.
<input id="element" placeholder="Select your preference programming language...">$(function () {
$('#element').autocomplete({
value: 'id',
items: [{
id: 1,
value: 'Javacript'
}, {
id: 2,
value: 'Java'
}, {
id: 3,
value: 'PHP'
}, {
id: 3,
value: 'Ruby'
}]
})
})Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-items="Javascript,Java,PHP,Ruby".
{
// Define items
items: [],
// Define max item showing on filter
maxItems: 5,
// Define property for filter item on filter
value: 'value',
// Define property for showing item on select
text: 'value',
// Define class for active item
itemActiveClass: 'autocomplete-active',
// Define template for item filter matching
itemHighlightTemplate: '<b class="font-weight-bold">$&</b>',
// Items container filter options
tagItemsContainer: 'div',
tagItemsClass: 'autocomplete-items',
tagItemsIdSuffix: '-' + 'autocomplete-list',
// Item filtered options
tagItemContainer: 'div',
tagItemClass: 'autocomplete-item',
// Enable or disable case sensitive
caseSensitive: false,
// Enable or disable when click outside autocomplete suggestion
enableCloseOnClickOutside: true,
// Enable or disable calculate absolute position
calculatePosition: true,
// Width of autocomplete list. Default is the same width to the input. Posibles values is the same accepted by jquery css function
width: null,
// Offset Top autocomplete list. Default is the same height to the input + 10px
offsetTop: 10,
// Offset Left autocomplete list. Default is the same left offset position to the input + 0px
offsetLeft: 0
}Attaches a autocomplete handler to an element collection.
Force the manual selection of an item if it exists between the items. Trigger event selected when item exists between the items.
// item = 1
// item = 'Javascrip'
// item = {id: 1}
// item = {value: 'Javascrip'}
// item = {id: 1, value: 'Javascrip'}
$('#element').autocomplete('selected', item)Clean the selected item if it exists. Trigger event clean
$('#element').autocomplete('clean')Close autocomplete. Trigger event closed
$('#element').autocomplete('close')Close all autocomplete on document
$('#element').autocomplete('closeAll')Remove autocomplete events. Trigger event destroy
$('#element').autocomplete('destroy')Return selected item
$('#element').data('autocomplete').selected()Return selected item value
$('#element').data('autocomplete').value()Return selected item text
$('#element').data('autocomplete').text()| Event Type | Description |
|---|---|
| selected.autocomplete | This event fires immediately when the select item. |
| clean.autocomplete | This event is fired call method .autocomplete('clean'). |
| closed.autocomplete | This event is fired call method .autocomplete('close') or after closing the item container when a selection was made. |
| destroy.autocomplete | This event is fired call method .autocomplete('destroy'). |
$('#element').on('selected.autocomplete', function () {
// do something…
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent