utils.autocomplete.js
A simple way to add auto-complete capabilities to any input field. Originally inspired by contenteditable-autocomplete.js by Gregor Martynus.
Code |
Action |
|---|---|
let items = [
'Mickey Mouse','Donald Duck',
'Oswald the Lucky Rabbit',
'Genie','Goofy','Snow White',
'Minnie Mouse','Scar','Tinker Bell', 'Dory'
];
new UTILS.Autocomplete({
target: $('#example1a1'),
value: 'Mickey Mouse',
onInput: (Autocomplete,opts) => {
let filtered_items = _.filter(items,item => {
return item.value
.toLowerCase()
.includes(opts.query.toLowerCase()));
}
opts.callback(filtered_items);
},
onSelected: (Autocomplete,opts) => {
console.log('selected value', opts.value);
}
});
//
|
content editable single Auto-Complete |
const onSearch = (query='') => {
return new Promise((resolve,reject) => {
let ajax_options = {
method: 'GET',
data: {
q:query.urlEncode()
}
},
onAfterSearch = response => {
if (_.isString(response))
response = JSON.parse(response);
if (!UTILS.Errors.isError(response)){ //success
let items = _.map(response.coutries, country => {
return {
label: country.country,
value: country.country
}
});
resolve(items);
}
else
reject();
},
onError = error => {
if (error instanceof Error)
UTILS.Errors.show(error.message);
reject();
};
$.fetch('/api/countries', ajax_options).then(onAfterSearch).catch(onError);
});
};
new UTILS.Autocomplete({
target: $('#example1b1'),
value: 'Iceland',
onInput: (Autocomplete,opts) => {
onSearch(opts.query).then(opts.callback);
},
onSelected: (Autocomplete,opts) => {
console.log('selected value', opts.value);
}
});
//
|
input single Auto-Complete |
let items = [
'Mickey Mouse','Donald Duck',
'Oswald the Lucky Rabbit',
'Genie','Goofy','Snow White',
'Minnie Mouse','Scar','Tinker Bell', 'Dory'
];
new UTILS.Autocomplete({
target: $('#example1c1'),
value: 'Mickey Mouse,Genie,Tinker Bell',
multiple: true,
onInput: (Autocomplete,opts) => {
let filtered_items = _.filter(items,item => item.toLowerCase().includes(opts.query.toLowerCase()));
opts.callback(filtered_items);
},
onSelected: (Autocomplete,opts) => {
console.log('selected value', opts.value);
}
});
//
|
content editable multi Auto-Complete |
const onSearch = (query='') => {
return new Promise((resolve,reject) => {
let ajax_options = {
method: 'GET',
data: {
q:query.urlEncode()
}
},
onAfterSearch = response => {
if (_.isString(response))
response = JSON.parse(response);
if (!UTILS.Errors.isError(response)){ //success
let items = _.map(response.coutries, country => {
return {
label: country.country,
value: country.country
}
});
resolve(items);
}
else
reject();
},
onError = error => {
if (error instanceof Error)
UTILS.Errors.show(error.message);
reject();
};
$.fetch('/api/countries', ajax_options).then(onAfterSearch).catch(onError);
});
};
new UTILS.Autocomplete({
target: $('#example1d1'),
value: 'Iceland, Germany',
multiple: true,
onInput: (Autocomplete,opts) => {
onSearch(opts.query).then(opts.callback);
},
onSelected: (Autocomplete,opts) => {
console.log('selected value', opts.value);
},
custom_methods_override: {
name: 'filterValueForDisplay',
method: function(){
if (this.isContentEditable()){
var elms = this.getValue().split(','),
$elms = _.map(elms, val => $(`${val}`));
this.setValue($elms);
}
return this;
}
}
});
//
|
content editable multi Auto-Complete |
API
Option |
Required |
Default |
Description |
|---|---|---|---|
| target | required | null |
DOM that will be set to auto-complete |
| is_multiple | optional | false |
Whether or not to allow multiple values ( comma separated ) |
| value | optional | null |
Sets the initial value of the auto-complete field |
Methods
Method |
Default |
Repeat |
Description |
|---|---|---|---|
| onInput | null |
REPEAT | Triggered when the user starts typing into the auto-complete field |
| onSelected | null |
REPEAT | Triggered when an item is selected from the suggestions dropdown menu |