JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

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">
<label for="auto">Search for a StackOverflow user:</label>
<input id="auto" type="text" />
<span id="message"></span>

JavaScript

$(function() {
    $("input").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "http://api.stackexchange.com/2.1/users",
                data: {
                    pagesize: 10,
                    order: 'desc',
                    sort: 'reputation',
                    site: 'stackoverflow',
                    inname: request.term
                },
                dataType: 'jsonp'
            }).done(function(data) {
            console.table(data)
                if (data.items) {
                    response($.map(data.items, function(item) {
                        return item.display_name;
                    }));
                } else {
                    
                }
            });
        },
        delay: 500,
        minLength: 3,
        response: function(event, ui) {
            if (!ui.content.length) {
            	ui.content.push({"label":'Create or Edit: "' + $(this).val() + '"',"value": 'Create or Edit' })
              console.log(ui.content)
              //$("#message").text("No results found");
            } else {
            	console.log(ui.content)
              ui.content.pop();
              ui.content.push({"label":'Create or Edit: "' + $(this).val() + '"',"value": 'Create or Edit' })
                $("#message").empty();
            }
        }
    });
});