JSFiddle - React, Tailwind, and code Playground

by fabiomcosta

HTML

<script src="http://github.com/fabiomcosta/mootools-meio-autocomplete/raw/master/Source/Meio.Autocomplete.js"></script>
<!-- more demos at the site http://www.meiocodigo.com/projects/meio-autocomplete/ -->

<form>
    <input id="field" type="text" />
    <input id="value-field" type="text" />
</form>


<p style="margin-top: 5px">You might want to use the valueField as a hidden input. I used a text input just to show what happens.</p>

CSS

/*
---

description: A plugin for enabling autocomplete of a text input or textarea.

authors:
 - Fábio Miranda Costa

license: MIT-style license

...
*/

.ma-container{
    color: #000;
    border: 1px solid #333;
    background-color: #fff;
    position: absolute;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
}
.ma-container ul{
    list-style: none;
    overflow: hidden;
    width: 100%;
}
.ma-container li{
    padding: 2px 5px;
    line-height: 16px;
    cursor: pointer;
    float: left;
    width: 100%;
    overflow: hidden;
}
.ma-container .ma-hover{
    color: #fff;
    background-color: #921506 !important;
}
.ma-container .ma-odd{
}
.ma-container .ma-even{
    background-color: #efefef;
}
.ma-loading{
    background-color: #fafba4;
}
.ma-selected{
    background-color: #ccfda8;
}

JavaScript

var data = [
    {identifier: 1, value: 'some1'},
    {identifier: 2, value: 'some2'},
    {identifier: 3, value: 'some3'}
];
new Meio.Autocomplete.Select('field', data, {
    valueField: $('value-field'),
    valueFilter: function(data){
        return data.identifier;
    },
    filter: {
        type: 'contains',
        path: 'value'
    }
});