JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<ul id="types">
    <li data-search="awesome meetings">Awesome</li>    
    <li data-search="meetings suck">Suck</li>
    <li data-search="great meetings">Great</li>        
    <li data-search="hate meetings">Hate</li>    
    <li data-search="love meetings" class="is-selected">Love</li> 
</ul>

<ul id="results"></ul>

CSS

body {
    font-family: helvetica, arial, sans-serif;
    background-color: #111111;
}

#results {
    margin-top: 35px;
}

#results li {
    padding: 10px;
    color: #FFF;
}

#results .user {
    font-size: 10px;
}

#results .tweet {
    font-size: 20px;
    display: block;
}

#types {
    position: fixed;
    top: 5px;
    left: 5px;
}

#types li {
    -webkit-border-radius: 3px;    
    padding: 2px 5px;
    display: inline-block;
    background-color: #FFF;
    cursor: pointer;    
}

#types li.is-selected {
    background-color: green;
    color: #FFF;
}

.highlight {
    -webkit-border-radius: 3px;
    background-color: green;
    color: #FFF;
    padding: 0 5px;
}

JavaScript

var currentSearch;
$("#types").on("click", "li", function(e) {
    e.preventDefault();
    searchItem($(this));
});

function searchItem(item) {
  $(".is-selected").removeClass("is-selected");
  item.addClass("is-selected");
  $("#results").html("<li>Searching...</li>");
  doSearch(item.data("search"));
}

searchItem($("#types .is-selected"));

function displayResults(data) {
    var list = $("#results");
    list.html("");
    var result;
    for (var i=0; i<data.results.length; i++) {
        result = data.results[i];
        list.append("<li><span class='tweet'>"+highlight(result.text)+"</span> <span class='user'>@"+result.from_user_name+"</span></li>");
    }
}

function highlight(text) {
    var search = currentSearch.replace(" ", ".+");
    var reg = new RegExp('('+search+')', "i");
    return text.replace(reg, '<span class="highlight">$1</span>');
}

function doSearch(value) {
    currentSearch = value;
  var url = "http://search.twitter.com/search.json"

  $.ajax(url, {
    data: {
        q: '"'+value+'"',
        rpp: 100
    },
    dataType: "jsonp",
    success: displayResults
  });    
}