JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.3.15/Bacon.js"></script>
<input id="search" type="text" />
<h1>Search Stm, <span id="query">--</span></h1>
<ul id="results"></ul>

CSS

[data-type="event"] {
    color: blue;
}
[data-type="article"] a{
    color: red;
}
[data-type="site-page"] a{
    color: maroon;
}
[data-type="service"] a {
    color: darkgray;
    font-family: sans-serif;
}
[data-type] {
    background-color: white;
}

JavaScript

var inputs = $('#search')
    .asEventStream('keyup change')
    .map(function(event) { return event.target.value; })
    .filter(function(value) { return value.length > 2; });

function showSpinner(){
  var spinner = $("<p>").attr("id", "spinner");
  spinner.text("Loading...");
  $("body").append(spinner);
}

function hideSpinner(){
  $("#spinner").remove();
}

var suggestions = inputs
                    .debounce(200 /* ms */)
                    .skipDuplicates()
                    .flatMapLatest(function(value) {
                        console.log(value);
                        return Bacon.fromPromise(searchWikipedia(value));
                    })
                    .filter(function(data) {
                        return data.length >= 0;
                    });

suggestions.onValue(function(data) {
    var $results = $('#results').empty();
    var x = 
    data.forEach(function(s) {
        var div = $("<div/>", {
            class: 'searchResult',
            "data-type": s.type
        });
        var anc = $('<a >', {
            text: s.title || s.slug,
            href: s.href
        });
        div.append(anc);
        div.appendTo($results);
    });
});

var query = suggestions.map(function(data) {
    return data.length;
}).toProperty('--');

query.assign($('#query'), 'text');

function searchWikipedia(term) {  
    var url = 'http://localhost:3000/searchDocs?';
    return $.getJSON(url, {
        q: term
    })
    .then(function(data) {
        return data;
    });
}