JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<link rel="stylesheet" href="http://digitarald.de/project/autocompleter/1-1/assets/Autocompleter.css">
<script src="http://digitarald.de/project/autocompleter/1-1/source/Observer.js"></script>
<form action="./" method="get" id="form-demo">
    <fieldset>
 
        <label>
            <span>Custom choices creation</span>
            <input type="text" name="local4" class="title" id="demo-local4" />
        </label>
 
    </fieldset>
</form>

CSS

.demo-info
{
    position:            absolute;
    top:                0;
    right:                4px;
    padding:            1px 2px;
    font-size:            0.9em;
    color:                #888;
}

JavaScript

/**
 * Autocompleter
 *
 * http://digitarald.de/project/autocompleter/
 *
 * @version        1.1.2
 *
 * @license        MIT-style license
 * @author        Harald Kirschner <mail [at] digitarald.de>
 * @copyright    Author
 */

var Autocompleter = new Class({

    Implements: [Options, Events],

    options: {/*
        onOver: $empty,
        onSelect: $empty,
        onSelection: $empty,
        onShow: $empty,
        onHide: $empty,
        onBlur: $empty,
        onFocus: $empty,*/
        minLength: 1,
        markQuery: true,
        width: 'inherit',
        maxChoices: 10,
        injectChoice: null,
        customChoices: null,
        emptyChoices: null,
        visibleChoices: true,
        className: 'autocompleter-choices',
        zIndex: 42,
        delay: 400,
        observerOptions: {},
        fxOptions: {},

        autoSubmit: false,
        overflow: false,
        overflowMargin: 25,
        selectFirst: false,
        filter: null,
        filterCase: false,
        filterSubset: false,
        forceSelect: false,
        selectMode: true,
        choicesMatch: null,

        multiple: false,
        separator: ', ',
        separatorSplit: /\s*[,;]\s*/,
        autoTrim: false,
        allowDupes: false,

        cache: true,
        relative: false
    },

    initialize: function(element, options) {
        this.element = $(element);
        this.setOptions(options);
        this.build();
        this.observer = new Observer(this.element, this.prefetch.bind(this), $merge({
            'delay': this.options.delay
        }, this.options.observerOptions));
        this.queryValue = null;
        if (this.options.filter) this.filter = this.options.filter.bind(this);
        var mode = this.options.selectMode;
        this.typeAhead = (mode == 'type-ahead');
        this.selectMode = (mode === true) ? 'selection' : mode;
        this.cached = [];
    },

    /**
     * build - Initialize DOM
     *
     * Builds the html structure for...