JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/le-frog/jquery-ui.css">
<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>
<div id="console"><p></p></div>

CSS

#console {
    margin-top: 20px;
    background-color: #000;
    color: #fff;
    height: 50px;
    font-family: futura;
    padding: 5px;
    font-size: 16px;
}

JavaScript

$("#tags").autocomplete({

    source: function(request, response) {
        $.ajax({
            url: '/echo/json/',
            dataType: 'json',
            success: function(data) {
                //what's wrong here ? 
                $.each(data.callee, function(index, Element) {
                    $('#console p').append(Element);
                });
            },
            data: {
                json: JSON.encode({
                    "callee": [
                        {
                        label: "apple",
                        value: "51325"},
                    {
                        label: "bOS",
                        value: "56487"}
                    ]
                })

            }


        });
    }
});