JSFiddle - React, Tailwind, and code Playground

by Mike McCaughan

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="http://heretic-monkey.com/wp-content/uploads/2012/03/HM.Utility.js"></script>
<div class="editor-label">
<label for="search1">Search:</label>
</div>
<div class="editor-field">
    <div class="hm-search-wrapper">
        <input id="search1" type="text" class="hm-search" 
data-search-autofill="true"
data-search-delay="200"
data-search-min-length="1"
data-search-mode="starts-with"
        />
        <a href="#search1-clear" id="search1-clear" class="hm-search-clear">X</a>
        <a href="#search1-search" id="search1-search" class="hm-search-submit">S</a>
    </div>
    <span class="field-validator-valid"></span>
</div>

CSS

.ui-menu-item { display: table; }
.ui-menu .ui-menu-item a { display: table-row; text-decoration: none; color: #000; }
.ui-menu-item a.ui-state-hover { background-color: yellow; color: blue; }
.ui-menu-item .hm-search-item-label { display: table-cell; min-width: 9em; white-space: nowrap; }
.ui-menu-item .hm-search-item-value { display: table-cell; min-width: 6em; white-space: nowrap; }
.hm-search { border: 1px solid #000; height: 30px; padding: 0.15em 80px 0.25em 0.25em; }
.hm-search-wrapper { display: inline; position: relative; }
.hm-search-clear { position: absolute; right: 36px; top: -10px; }
.hm-search-clear.ui-button { background: none transparent; border: 0 none transparent; }
.hm-search-submit { position: absolute; right: -4px; top: -10px; }

JavaScript

(function ($, window, undefined) {
    
    $.extend(window.HM.Utility, {
        insertAtCursor: function (element, value) {
            var $this = $(element), currentValue = $this.val();
            if (!HM.Utility.isUndefinedOrNull(document.selection)) {
                $this.focus();
                var sel = document.selection.createRange();
                sel.text = value;
            }
            else if (!HM.Utility.isUndefinedOrNull(element.selectionStart)) {
                var startPos = element.selectionStart;
                var endPos = element.selectionEnd;
                $this.val(currentValue.substring(0, startPos) + value + currentValue.substring(endPos, currentValue.length));
            } else {
                $this.val(currentValue + value);
            }
        },
    });
    
    // Copy from jquery UI 
    // used to prevent race conditions with remote data sources
    var requestIndex = 0;

    $.widget("hm.search", $.ui.autocomplete, {
        options: {
            autoFill: false,
            delay: 100,
            disabled: false,
            gridId: null,
            gridParameterName: 'searchCriteria',
            minLength: 1,
            parameterName: 'text',
            autoFocus: false,
            appendTo: '.hm-search-wrapper:has(>.hm-search)',
            position: {
                my: 'left top',
                at: 'left bottom',
                collision: 'fix'
            },
            showScrollbar: true,
            showScrollbarMaxHeight: '10em',
            /*
            source: function (request, response) {
                request[this.options.parameterName] = request.term;
                delete request.term;
                $.ajax({
                    url: this.options.searchAction,
                    data: request,
                    dataType: 'json',
                    type: 'POST',
                    success: response
                });
            },
            */
            focus: function...