JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://angularlight.org/bin/alight_0.14.last.min.js"></script>
<div al-app="main">
  <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
    <form class="form-search"> 
        <div class="input-append">
          <input type="text" al-value="search" class="search-query" style="width: 80px">
          <button type="submit" class="btn">Search</button>
        </div>
            <p>{{filteredList.length}} items were found </p>
        <ul class="nav nav-pills nav-stacked">
          <li al-repeat="user in users | filter:search | storeTo filteredList">
            <a href="#"> {{user.name}} </a>
          </li> 
        </ul>
        <span :hidden="filteredList.length">no result</span>
    </form>
  </div>
</div>

JavaScript

alight.ctrl.main = function(scope) {
    scope.filteredList = [];
  scope.users = [{ name:'Igor Minar' }, { name:'Brad Green' }, { name:'Dave Geddes' }, { name:'Naomi Black' }, { name:'Greg Weber' }, { name:'Dean Sofer' }, { name:'Wes Alvaro' }, { name:'John Scott' }, { name:'Daniel Nadasi' }];
};