AngularJs: Search and highlight matched text in MVC application - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

AngularJs: Search and highlight matched text in MVC application

Here in this article I am going to explain how to search and highlight the matched text using Angularjs in MVC application.

AngularJs: Search and highlight matched text in MVC application


Description:
I am displaying the data in table using ng-repeat. I want to highlight the searched text results.

Implementation:

I have created a table Employee and inserted dummy record into it. I am using database first approach.

Add Controller
Add empty Controller. Create json method to fetch the records from database. Here is code of Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
{
    public class AngularController : Controller
    {
        //
        // GET: /Angular/
        DemoEntities1 db = new DemoEntities1();
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetEmployees()
        {
            var emp = db.Employees.ToList();
            return Json(emp, JsonRequestBehavior.AllowGet);          
        }       
    }
}


Add View
Now add view for Index action. Write the code on view as given below:

Complete Code of Inedx.Cshtml

@{
    ViewBag.Title = "MVC-AngualarJs Tutorial";
}
<style>
    table tr td th {
        text-align: center;
        border:none;
    }
    .ng-binding {
        padding: 40px;
    }
     a {
        text-decoration: none;
        color: #2196F3;
    }
     /*tr:nth-child(odd) {
        background: #b8d1f3;
    }
      Define the background color for all the EVEN background rows 
     tr:nth-child(even) {
        background: #dae5f4;
    }
    .match {
        background: #24D0F9;
    }*/
    .highlighttext {
        background: #F44336;
        color: #fff;
    }
</style>


<fieldset style="width:90%">
    <legend>MVC-AngualarJs Search(Filter) and Highlight Searched text Tutorial</legend>

    <div ng-app="mvcapp" ng-controller="AngularController">    
              <table>
           <tr>
               <td>Search :</td>
               <td colspan="2"><input type="text" ng-model="empname" placeholder="Search"></td>
           </tr>
           <tr>
               <td></td>
               <td></td>
           </tr>
       </table>
  
       <table>         
           <tr>
               <th><a href="" ng-click="columnToOrder='id';reverse=!reverse">S.No.</a></th>
            
               <th>
                   <a href="" ng-click="columnToOrder='Name';reverse=!reverse">Name</a>
               </th>            
               <th>
                   <a href="" ng-click="columnToOrder='Phone';reverse=!reverse">Phone</a>
               </th>
               <th>
                   <a href="" ng-click="columnToOrder='Department';reverse=!reverse">Department</a>
               </th>
          
               <th>
                   <a href="" ng-click="columnToOrder='Salary';reverse=!reverse">Salary</a>
               </th>
            
               <th>
                   <a href="">Image</a>
               </th>
             
               <th >
                   <a href="" ng-click="columnToOrder='EmailId';reverse=!reverse">Email</a>

               </th>
           </tr>
           <tr ng-repeat="emp in employees| filter:empname |orderBy:columnToOrder:reverse">
               <td>{{$index+1}}</td>
               <td><span ng-bind-html="emp.Name|highlight:empname"></span></td>
               <td>{{emp.Phone }}</td>
               <td>{{emp.Department}}</td>
               <td>{{emp.Salary }}</td>
               <td><img ng-src="{{emp.ImagePath || 'images/image.jpg'}}" alt="" title="{{emp.Name}}" width="150" height="150" /></td>
               <td><span ng-bind-html="emp.EmailId ||'email not available'|highlight:empname"></span></td>
           </tr>
       </table>
        <div ng-show="(employees|filter:empname).length==0" style="color:red;font-weight:bold">No Result Found</div>
    </div>
</fieldset>

//Script
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
    var angular = angular.module('mvcapp', []);
  
    angular.controller('AngularController', ['$scope', '$http',function ($scope, $http) {

        $http.get('/Angular/GetEmployees').success(function (data) {
            $scope.employees = data;           
        })      
    }]).filter('highlight', function ($sce) {
        return function (text, phrase) {
            if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'),
              '<span class="highlighttext">$1</span>')
            return $sce.trustAsHtml(text)
        }
    });
</script>

Now save the project, build and run. To test it search a record exist in database. Matched record will be highlight in red color with white text.


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon