JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.22/Bacon.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<form id="search" action="#">
    <input type="text" id="query" placeholder="Search for..."/>
    <button id="button">Search</button>
</form>
<div id="results"></div>

<script id="some-template" type="text/x-handlebars-template">
        
    <ul> 
        {{#matches}} 
        <li>{{this}}</li>
        {{/matches}} 
    </ul>
    
</script>

JavaScript

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 
function doSearch(query) {
    var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=' + encodeURI(query);
    return Bacon.fromPromise($.ajax({
        url:url, 
        dataType:"jsonp"
    }))
}
var buttonStream = $("#button").asEventStream("click");
var searchStream = buttonStream
    .map(function(){
        return $("#query").val();
    })
    .flatMapLatest(doSearch);

searchStream.onValue(function(results){
    console.log(results);
    results["matches"] = results["1"];
     $('#results').html(template(results));    
});