JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

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>
<div id="autocomplete" contenteditable="true"></div>
<span id="message"></span>

CSS

#autocomplete { 
    border: 1px solid black;
}

JavaScript

$(function() {
    $("#autocomplete").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) {
                if (data.items) {
                    response($.map(data.items, function(item) {
                        return item.display_name;
                    }));
                } else {
                    response([]);
                }
            });
        },
        delay: 500,
        minLength: 3
    });
});