JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://rawgithub.com/devbridge/jQuery-Autocomplete/master/dist/jquery.autocomplete.js"></script>
<input id="me" value="" size="50" />
CSS
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
JavaScript
$(function() {
$('#me').autocomplete({
lookup: [ 'first', 'second', 'third' ],
minChars: 0
});
$('#me').on('focus', function (){
$(this).autocomplete().onValueChange();
});
});
/**
* Ajax Autocomplete for jQuery, version 1.2.7
* (c) 2013 Tomas Kirda
*
* Ajax Autocomplete for jQuery is freely distributable under the terms of an MIT-style license.
* For details, see the web site: http://www.devbridge.com/projects/autocomplete/jquery/
*
*/
/*jslint browser: true, white: true, plusplus: true */
/*global define, window, document, jQuery */
// Expose plugin as an AMD module if AMD loader is present:
(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
'use strict';
var
utils = (function () {
return {
extend: function (target, source) {
return $.extend(target, source);
},
createNode: function (html) {
var div = document.createElement('div');
div.innerHTML = html;
return div.firstChild;
}
};
}()),
keys = {
ESC: 27,
TAB: 9,
RETURN: 13,
UP: 38,
DOWN: 40
};
function Autocomplete(el, options) {
var noop = function () { },
that = this,
defaults = {
autoSelectFirst: false,
appendTo: 'body',
serviceUrl: null,
lookup: null,
onSelect: null,
width: 'auto',
minChars: 1,
maxHeight: 300,
deferRequestBy: 0,
params: {},
formatResult:...