JSFiddle - React, Tailwind, and code Playground

by shalan

HTML

<table>
		<tr>
			<td>Suburb:</td>
			<td><input type="text" id="suburb" size="50" /></td>
		</tr>
		<tr>
			<td colspan="2" style="background-color:#CCC; height:5px"></td>
		</tr>
		<tr>
			<td>City:</td>
			<td><input type="text" id="city" size="50" readonly="readonly" /></td>
		</tr>
		<tr>
			<td>Postal Code:</td>
			<td><input type="text" id="code" size="50" readonly="readonly" /></td>
		</tr>
	</table>

CSS

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: red; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
table td, input[type="text"] { padding: 5px; }

JavaScript

$(function() {
    $('#suburb').autocomplete({
        lookup: theData,
        minChars: 1
    });
});

var theData = [
    {"value":"Eastcliffe", "data":{"city":"Westwood","code":"23145"}},    
    {"value":"Crestwich","data":{"city":"Westerlyn","code":"66365"}},    
    {"value":"South Woodbury Island","data":{"city":"Fairmoor","code":"89798"}},    
    {"value":"Faircastle","data":{"city":"Westwood","code":"23144"}},
    {"value":"Brightkeep","data":{"city":"Merrowshore","code":"08872"}},    
    {"value":"Summerbank","data":{"city":"Wyvernfield","code":"10467"}},    
];

/**
*  Ajax Autocomplete for jQuery, version 1.2.24
*  (c) 2015 Tomas Kirda
*
*  Ajax Autocomplete for jQuery is freely distributable under the terms of an MIT-style license.
*  For details, see the web site: https://github.com/devbridge/jQuery-Autocomplete
*/

/*jslint  browser: true, white: true, plusplus: true, vars: true */
/*global define, window, document, jQuery, exports, require */

// 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 if (typeof exports === 'object' && typeof require === 'function') {
        // Browserify
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    'use strict';

    var
        utils = (function () {
            return {
                escapeRegExChars: function (value) {
                    return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                },
                createNode: function (containerClass) {
                    var div = document.createElement('div');
                    div.className = containerClass;
                    div.style.position = 'absolute';
                    div.style.display = 'none';
                    return div;
             ...