boilerplate.js
Version:
Development Tools
137 lines (102 loc) • 4.14 kB
JavaScript
/* Example
<form id='insurance-modal-modal'>
<input>
<div class="results">
</div>
</form>
components.autocomplete.init({
form: '#insurance-modal-form',
results: '.results',
data: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
limit: 4, // default = 6
onSubmit: function(value) { console.log(value); },
onSelect: function(value) { console.log(value); }
});
*/
components('autocomplete.init', config => {
config.selector = {};
try {
config.selector.form = config.form;
config.form = document.querySelector(config.form);
} catch (error) {null;}
try {
config.selector.results = config.results;
config.results = config.form.querySelector(config.results);
} catch (error) {
null;
}
config.limit = config.limit || 6;
let count = config.data.length;
let input = config.form.querySelector('input');
config.form.classList.add('autocomplete-default');
config.form.setAttribute('autocomplete', 'off');
config.form.addEventListener('submit', function(event) {
config.results.classList.add('hidden');
config.onSubmit(input.value);
event.preventDefault();
});
config.results.onclick = function(event) {
input.value = event.target.innerText;
config.onSelect(event.target.innerText);
};
Keyup(input, 'ArrowDown', function(e) {
let current = document.querySelector(`${config.selector.form} ${config.selector.results}`);
let selected = current.querySelector('.selected');
if (!selected) {
current = current.firstElementChild;
current.classList.add('selected');
input.value = current.innerText;
} else {
selected.classList.remove('selected');
if (selected.nextElementSibling) {
selected.nextElementSibling.classList.add('selected');
input.value = selected.nextElementSibling.innerText;
} else {
selected = config.results.querySelector('div');
selected.classList.add('selected');
input.value = selected.innerText;
}
}
});
Keyup(input, 'ArrowUp', function(e) {
let current = config.results.querySelector('.selected');
if (!current) {
current = config.results.querySelector('div:last-child');
current.classList.add('selected');
input.value = current.innerText;
} else {
current.classList.remove('selected');
if (current.previousElementSibling) {
current.previousElementSibling.classList.add('selected');
input.value = current.previousElementSibling.innerText;
} else {
current = config.results.querySelector('div:last-child');
current.classList.add('selected');
input.value = current.innerText;
}
}
});
input.addEventListener("focusout", function(event) {
setTimeout(() => {
config.results.classList.add('hidden');
}, 400);
});
input.addEventListener("focusin", function(event) {
config.results.classList.remove('hidden');
});
input.addEventListener('input', function (event) {
config.results.classList.remove('hidden');
let found = 0;
let match = [];
let i;
if (input.value.length === 0) return config.results.innerHTML = '';
for (i = 0; i < count; i++) {
if (found === config.limit) break;
if ( config.data[i].toUpperCase().indexOf(this.value.toUpperCase()) >= 0 ) {
match.push(`<div>${config.data[i]}</div>`);
found++;
}
}
config.results.innerHTML = match.join('');
});
});