JSFiddle - React, Tailwind, and code Playground

by psyne

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/ui-lightness/jquery-ui.css">
<div>
    <div class="ui-widget">
        <div class="control-group">
            <label class="control-label" for="searchBox">Search</label>
            <div class="controls">
                <input id="searchBox" class="input-large" />
            </div>
        </div>
    </div>
    <div id="searchResult" class="ui-widget" style="margin-top: 1em;">
    </div>
</div>

JavaScript

$(document).ready(function () {
            $("#searchBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "http://dev.virtualearth.net/REST/v1/Locations",
                        dataType: "jsonp",
                        data: {
                            CountryRegion: 'US',
                            adminDistrict: 'CA',
                            inclnb: 1,
                            key: "ApAVP9b7-xkNtEZ1rAXsexnXeD8wl_X37bLhSuHAXyKOKLeuYytTgw-qfuvYBLkY",
                            addressLine: request.term
                        },
                        jsonp: "jsonp",
                        success: function (data) {
                            var result = data.resourceSets[0];
                            if (result) {
                                if (result.estimatedTotal > 0) {
                                    response($.map(result.resources, function (item) {
                                        return {
                                            data: item,
                                            label: item.name + ' (' + item.address.countryRegion + ')',
                                            value: item.name
                                        }
                                    }));
                                }
                            }
                        }
                    });
                },
                minLength: 1,
                change: function (event, ui) {
                    if (!ui.item)
                        $("#searchBox").val('');
                },
                select: function (event, ui) {
                    displaySelectedItem(ui.item.data);
                }
            });
        });

        function displaySelectedItem(item) {
            $("#searchResult").empty().append('Result: ' + item.name).append(' (Latitude: ' + item.point.coordinates[0] + ' Longitude: ' +...