JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.1.js"></script>
<script type="text/x-handlebars">
    <h1>Search Demo</h1>
    {{render "fruitSearch"}}
    {{render "citySearch"}}
</script>

<script type="text/x-handlebars" data-template-name="fruitSearch">
    <h2 class="subheader">Search for Fruits</h2>
    {{input type="text" value=query placeholder="Search for fruits..."}}
    {{partial results}}
</script>

<script type="text/x-handlebars" data-template-name="citySearch">
    <h2 class="subheader">Search for Cities</h2>
    {{input type="text" value=query placeholder="Search for cities..."}}
    {{partial results}}
</script>

<script type="text/x-handlebars" data-template-name="_results">
    {{#if results}}
        <h3><small>Found {{results.length}} Search Results for <kbd>{{query}}</kbd>:</small></h3>
        <ul>
            {{#each result in results}}
            <li>{{highlight result.name query}}</li>
            {{/each}}
        </ul>
    {{else}}
        {{#if isSearching}}
            <div class="alert-box alert">No search results for <kbd>{{query}}</kbd>.</div>
        {{/if}}
    {{/if}}
</script>




<!-- Some dummy data to search through -->
<script>
window.FRUITS = [
  { name: 'Apple' },
  { name: 'Apricot' },
  { name: 'Avocado' },
  { name: 'Banana' },
  { name: 'Bilberry' },
  { name: 'Black Berry' },
  { name: 'Black Currant' },
  { name: 'Blackberry' },
  { name: 'Blueberry' },
  { name: 'Cantaloupe' },
  { name: 'Cherry' },
  { name: 'Clementine' },
  { name: 'Currant' },
  { name: 'Damson' },
  { name: 'Date' },
  { name: 'Duran' },
  { name: 'Eggplant' },
  { name: 'Fig' },
  { name: 'Gooseberry' },
  { name: 'Grape' },
  { name:...

CSS

body {
    margin: 3em;
}

JavaScript

window.App = Ember.Application.create();

App.SearchController = Ember.Controller.extend({
    model: [{name: 'sample'}, {name: 'data'}],
    query: '',
    isSearching: function() { return this.get('query').length > 0 }.property('query'),
    results: function() {
        var query = this.get('query');
        if (query === '') return [];
        var regexp = new RegExp(query, 'i');
        return this.get('model').filter(function(item) {
            return item.name.match(regexp);
        });
    }.property('query', 'model'),
});

App.FruitSearchController = App.SearchController.extend({
    model: window.FRUITS
});

App.CitySearchController = App.SearchController.extend({
    model: window.CITIES
});

Ember.Handlebars.helper('highlight', function(string, substring) {
    var escaped = Handlebars.Utils.escapeExpression(string); // Escape user data to prevent XSS
    var index = escaped.toLowerCase().indexOf(substring.toLowerCase());
    if (index === -1) return escaped; // No match
    
    var beforeMatch = escaped.slice(0, index);
    var match       = escaped.slice(index, index + substring.length);
    var afterMatch  = escaped.slice(index + substring.length);
    return new Handlebars.SafeString(beforeMatch + '<strong>' + match + '</strong>' + afterMatch);
});