otto

a javascript autocomplete library built on top of hyperapp v1

Project status:

Otto has been superceded by etto, which has many of the same features and more, and *zero* dependencies. Otto will no longer be maintained.

installation

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.

usage

local data

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);

select mode

// Same choices array from above
var config = { inputClass: 'otto-input', selectMode: true };
var otto2 = Otto(document.getElementById('div-2'), config, choices);

xhr / ajax

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 });