Angular: Real-time search

by Roman

HTML

<script src="http://angularlight.org/bin/alight.last.min.js"></script>
<div al-app="mainCtrl">
    <input al-value="search" type="text" placeholder="Type here" />
    <ul>
        <li al-repeat="lib in libraries | filter:search">
            {{lib.name}} <a href="{{lib.url}}">{{lib.url}}</a>
        </li>
    </ul>
</div>

CSS

* {
    padding:0;
    margin:0;
}

html{
    font:14px normal Arial, sans-serif;
    color:#626771;
    background-color:#fff;
}

body{
    padding:60px;
    text-align: center;
}

input[type=text]{
    text-align: center;
    font: inherit;
    border: 6px solid #a3d8d6;
    padding: 13px 12px;
    font-size: 15px;
    box-shadow: 0 1px 1px #DDD;
    width: 384px;
    outline: none;
    display: block;
    color: #7B8585;
    margin: 0 auto 20px;
}

ul{
    list-style: none;
    display: inline-block;
    width: 420px;
    text-align: left;
}

ul li{
    display: block;
    padding: 15px 20px;
    background-color: #F8F8F8;
    color: #7B8585;
    margin-bottom: 3px;
    position: relative;
    
    transition: 0.3s;
}

ul li a{
    position: absolute;
    left: 160px;
    font-size: 12px;
    line-height: 16px;
    color: #969d9d;
}

ul li:hover{
    background-color:#d8f2f1;
}

JavaScript

function mainCtrl(scope) {
    scope.libraries = [
        { name: 'Backbone.js', url: 'http://documentcloud.github.io/backbone/'},
        { name: 'AngularJS', url: 'https://angularjs.org/'},
        { name: 'jQuery', url: 'http://jquery.com/'},
        { name: 'Prototype', url: 'http://www.prototypejs.org/'},
        { name: 'React', url: 'http://facebook.github.io/react/'},
        { name: 'Ember', url: 'http://emberjs.com/'},
        { name: 'Knockout.js', url: 'http://knockoutjs.com/'},
        { name: 'Dojo', url: 'http://dojotoolkit.org/'},
        { name: 'Mootools', url: 'http://mootools.net/'},
        { name: 'Underscore', url: 'http://documentcloud.github.io/underscore/'},
        { name: 'Lodash', url: 'http://lodash.com/'},
        { name: 'Moment', url: 'http://momentjs.com/'},
        { name: 'Express', url: 'http://expressjs.com/'},
        { name: 'Koa', url: 'http://koajs.com/'}
    ];
};