a javascript autocomplete library built on top of hyperapp v1
Otto has been superceded by etto, which has many of the same features and more, and *zero* dependencies. Otto will no longer be maintained.
full docs available on github
npm install otto-complete --save
or
<script src="https://unpkg.com/otto-complete/dist/otto.min.js"></script>
you may include the optional styles as well:
.otto-ul { padding: 0; margin: 0; }
.otto-li { padding: 6px; margin: 0; }
.otto-selected, .otto-li:hover { background-color: #f2f2f2; }
.otto-dropdown { border: 1px solid lightgrey; -webkit-transition: all 0.5s; transition: all 0.5s; }
to style the `input` element, utilize the `inputClass` property in Otto's config to append a custom class.
note: to style the spinner and the spinner dots, utilize the 'otto-spinner' and 'otto-spinner-dot' classes.
var choices = [
{ label: 'Alabama' },
{ label: 'Alaska' },
{ label: 'Michigan' },
{ label: 'Minnesota' },
{ label: 'Wyoming' }
];
var config = { inputClass: 'otto-input' };
var otto1 = Otto(document.getElementById('div-1'), config, choices);
// Same choices array from above
var config = { inputClass: 'otto-input', selectMode: true };
var otto2 = Otto(document.getElementById('div-2'), config, choices);
this example uses the star wars API. try searching for 'skywalker'
var xhr = null;
var source = function(query, done) {
// Abort last request
if (xhr) {
xhr.abort();
}
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://swapi.co/api/people/?search=' + query, true);
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) {
// Parse the response here...
var choices = [];
var json = JSON.parse(xhr.responseText);
json.results.forEach(function(person) {
choices.push({ label: person.name });
});
done(choices);
} else {
// Else return empty array
done([]);
}
};
// Returns empty array onerror
xhr.onerror = function() {
done([]);
};
xhr.send();
};
var otto3 = Otto(document.getElementById('div-3'), { inputClass: 'otto-input', source: source });