JSFiddle - React, Tailwind, and code Playground

by sas_sam

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div id="rawResults">Raw results from server : <div class="data"></div></div>
Enter a number between 0 and 10 : <br />
<input type="text" id="typeahead" />

CSS

#rawResults {
    padding: 5px;
    background: #ededed;
    margin-bottom: 5px;
    display: none;
}

JavaScript

function showRawResult(results)
{
    var html = '';
    var $container = $('#rawResults').show();
    
    for (var i = 0; i < results.length; ++i) {
        html += '<li><b>Ref</b>:'+results[i].ref+', <b>DĂ©tails: </b>'+results[i].details+'</li>';
    }
    $('.data', $container).html('<ul>'+html+'</ul>');
}

function fakeSearchForFiddle(search) {
    var nbResults = parseInt(search, 10);
    var results = [];
    
    if (isNaN(nbResults)) {
        return results;
    }
    nbResults = Math.max(0, Math.min(10, nbResults));
    for (var i = 1; i <= nbResults; ++i) {
        results.push({
            ref: '#REF'+i, 
            details: 'details ref'+i
        });
    }    
    return JSON.stringify(results);
}

$(function(){
    var $el = $('#typeahead');
    var resultsObj = {};
    var resultsStrings = [];
    var engine = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace, 
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '/echo/json/',  
            prepare: function(xhr, settings) {
                settings.dataType = 'json';
                settings.type = 'POST';
                settings.data = {json: fakeSearchForFiddle($el.typeahead('val'))};
                return settings;
            }, 
            transform: function(data) {
                showRawResult(data);
                
                resultsObj = {};
                resultsStrings = [];
                
                if ($.isArray(data)) {
                    for (var i = 0; i < data.length; ++i) {
                        resultsObj[data[i].ref] = data[i];
                        resultsStrings.push(data[i].ref);
                    }
                }
                return resultsStrings;
            }
        }
    });
    engine.initialize();
    
    $el.typeahead({
        highlight: false
    }, {
        name: 'main', 
        source: engine.ttAdapter(), 
        templates: {
            empty: '<div...