JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<input id="project" type="text" />&nbsp;<input type="button" value="v" />

<div class="ui-widget">
    <label>Your preferred programming language:</label>
    <span class="ui-combobox">
        <input id="project" type="text" 
            class="ui-combobox-input ui-state-default ui-widget ui-widget-content ui-corner-left" />
        <a id="showall" tabindex="-1" title="Show All Items"></a>
    </span>
</div>

JavaScript

$(function() {
    var projects = [
        {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library"},
    {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery"},
    {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine"}
    ];


    $("#showall").button({
        icons: {
            primary: "ui-icon-triangle-1-s"
        },
        text: false
    })
    .removeClass("ui-corner-all")
    .addClass("ui-corner-right ui-combobox-toggle")
    .on("click", function() {
        $("#project").autocomplete("search", "");
    });


    $("#project").autocomplete({
        minLength: 0,
        source: function(request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response($.grep(projects, function(value) {
                return matcher.test(value.label || value.value || value) || matcher.test(value.desc);
            }));
        },
        focus: function(event, ui) {
            $("#project").val(ui.item.label);
            return false;
        },
        select: function(event, ui) {
            $("#project").val(ui.item.label);
            $("#project-id").val(ui.item.value);
            $("#project-description").html(ui.item.desc);
            return false;
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.label + "<br>" + item.desc + "</a>").appendTo(ul);
    };
});