JSFiddle - React, Tailwind, and code Playground

by matox

HTML

<div id="searchBox">
    <form method="get" action="/search" id="search">
        <input id="auto" name="q" type="text" size="40" placeholder="Search..." />
    </form>
</div>

CSS

#search {
}
#search input[type="text"] {
    background: url('http://www.bloggermint.com/demos/css3searchbox/search-dark.png') no-repeat 10px 6px #444;
    border: 0 none;
    color: white;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
    width: 60%;
    outline: none;
}
.ui-autocomplete {
    position: relative;
    top: 40px;
    left: 40px;    
}

JavaScript

$(function () {
    $("#auto").autocomplete({
        source: function (request, response) {
            response([{
                label: "Loading...",
                loading: true
            }]);
            $.ajax({
                url: "/echo/json/",
                data: {
                    json: JSON.stringify(['StackOverflow', 'Google', 'Yahoo'])
                },
                type: "POST"
            }).success(function (data) {
                response(data);
            });
        },
    }).data("autocomplete")._renderItem = function (ul, item) {
        var $li = $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);

        if (item.loading) {
            $li.find("a").on("click", false);
        }
    };
});