Hello Reader's if you want to make realtime search listing from text box then here you can learn how to do it. This code is driven by Javascript. The listing will appear from another page and quick search will works on from page. So the html code for this will go like this:-

<div ng-app="instantSearch" ng-controller="InstantSearchController">

    <div class="bar">   
        <input type="text" ng-model="searchString" placeholder="Enter your search terms" />
    </div>

    <ul>

        <li ng-repeat="i in items | searchFor:searchString">
            <a href="{{i.url}}"><img ng-src="{{i.image}}" /></a>
            <p>{{i.title}}</p>
        </li>
    </ul>
</div>

Now write the Javascript for this function as follows:-

var app = angular.module("instantSearch", []);

app.filter('searchFor', function(){

    // All filters must return a function. The first parameter
    // is the data that is to be filtered, and the second is an
    // argument that may be passed with a colon (searchFor:searchString)

    return function(arr, searchString){

        if(!searchString){
            return arr;
        }

        var result = [];

        searchString = searchString.toLowerCase();

        // Using the forEach helper method to loop through the array
        angular.forEach(arr, function(item){

            if(item.title.toLowerCase().indexOf(searchString) !== -1){
                result.push(item);
            }

        });

        return result;
    };

});


function InstantSearchController($scope){
    $scope.items = [
        {
            url: 'http://abc.com/',
            title: 'This is test 2',
            image: 'image linksfeatured_4-100x100.jpg'
        },
        {
            url: 'http://abc.com/',
            title: 'This is test 2',
                image: 'image linksfeatured_4-100x100.jpg'
        },
        {
        url: 'http://abc.com/',
            title: 'Create a slide-out footer with this neat z-index trick',
            image: 'image linksfeatured_4-100x100.jpg'
        },
        {
            url: 'http://abc.com/',
            title: 'This is test 2',
                image: 'image linksfeatured_4-100x100.jpg'
        },
        {
            url: 'http://tutorialzine.com/2013/05/diagonal-fade-gallery/',
            title: 'Smooth Diagonal Fade Gallery with CSS3 Transitions',
            image: 'image linksfeatured_4-100x100.jpg'
        },
        {
            url: 'http://abc.com/',
                title: 'This is test 2',
                image: 'image linksfeatured_4-100x100.jpg'
        },
        {
            url: 'http://abc.com/',
            title: 'Your First Backbone.js App  Service Chooser',
            image: 'image linksfeatured_4-100x100.jpg'
        }
    ];

}

Now add the CSS in the last

*{
    margin:0;
    padding:0;
}

body{
    font:15px/1.3 'Open Sans', sans-serif;
    color: #5e5b64;
    text-align:center;
}

a, a:visited {
    outline:none;
    color:#389dc1;
}

a:hover{
    text-decoration:none;
}

section, footer, header, aside, nav{
    display: block;
}

/*-------------------------
    The search input
--------------------------*/

.bar{
    background-color:#5c9bb7;

    background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
    background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
    background-image:linear-gradient(top, #5c9bb7, #5392ad);

    box-shadow: 0 1px 1px #ccc;
    border-radius: 2px;
    width: 400px;
    padding: 14px;
    margin: 45px auto 20px;
    position:relative;
}

.bar input{
    background:#fff no-repeat 13px 13px;
    background-image:url(data:image/png;)

    border: none;
    width: 100%;
    line-height: 19px;
    padding: 11px 0;

    border-radius: 2px;
    box-shadow: 0 2px 8px #c4c4c4 inset;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    color: #738289;
    font-weight: bold;
    outline: none;
    text-indent: 40px;
}

ul{
    list-style: none;
    width: 428px;
    margin: 0 auto;
    text-align: left;
}

ul li{
    border-bottom: 1px solid #ddd;
    padding: 10px;
    overflow: hidden;
}

ul li img{
    width:60px;
    height:60px;
    float:left;
    border:none;
}

ul li p{
    margin-left: 75px;
    font-weight: bold;
    padding-top: 12px;
    color:#6e7a7f;
}

Now load this code and you will see the text box and when you start typing in it, It will show all the matching results in the listing below it. It is fast for searching in realtime projects