In this article we can discuss about AngularJS Filter Search Tutorial.

AngularJS Filter Search Tutorial

AngularJS Filter Search Tutorial

how you can create a tool which allows you to type in a search query in an input box and see all matches below that input box without having to reload the page and we’ll be leveraging AngularJS’s filter mechanic to do so.

o get us started we’ll start with mocking up what our page will look like, this is just going to be a basic no-frills design to get us started but feel free to modify it to suit.

HTML

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>Google Search Like Functionality</title>
    <!-- Latest compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="bootstrap.min.css"
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>
  <body ng-controller="SearchController">
    <div class="search-box">
      <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4">
          <h2>TutorialEdge Search: {{query}}</h2>
          <form class="form">
            <input
              class="form-control"
              type="text"
              ng-model="query"
              ng-change="updateValue()"
            />
          </form>
        </div>
        <div class="col-lg-4"></div>
      </div>
    </div>

    <div class="search-results">
      <div class="container">
        <div class="result" ng-repeat="result in results | filter: query">
          <a href="#"><h2>{{result.title}}</h2></a>
          <p class="url">{{result.link}}</p>
          <p>{{result.content}}</p>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="container">
        <p class="info">
          Full Source Code for this example can be found here: Github Link
        </p>
        <p class="info">
          Original Tutorial Link: http://tutorialedge.net
        </p>
      </div>
    </div>

    <script src="AppController.js"></script>
  </body>
</html>

CSS

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

myApp.controller("SearchController", [
  "$scope",
  function($scope) {
    $scope.results = [
      {
        title: "Cars",
        link: "http://tutorialedge.net",
        content: "lorem ipsum doler fox pixel"
      },
      {
        title: "Boats",
        link: "http://tutorialedge.net",
        content: "lorem ipsum doler cat pixel"
      },
      {
        title: "Vans",
        link: "http://tutorialedge.net",
        content: "lorem ipsum doler pig pixel"
      },
      {
        title: "Limos",
        link: "http://tutorialedge.net",
        content: "lorem ipsum doler pixel"
      }
    ];
  }
]);

 we’ve implemented that you should hopefully see the everything in our array listing on our search results

Now that we’ve got everything we need to display our search results we can move onto implementing our search box. This will essentially take in our search query string and then filter the results that we’ve listed to show only those that present a match. The match could be present in either the title, the url or the content of the list we are using so it’s kind of similar to the way google shows you pages for things that contain information about specific topics.

AngularJS Filter Search Code

<div class="result" ng-repeat="result in results | filter: query">
  <a href="#"><h2>{{result.title}}</h2></a>
  <p class="url">{{result.link}}</p>
  <p>{{result.content}}</p>
</div>

Also Check out Interacting With RESTful APIs Using $http in AngularJS

If you interested in the Entertainment genre please check this also thebiographys.com

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *