In our previous post we had discussed on how to do a Basic Search in AngularJS using built-in angular filter.

Now lets see how to make an advanced search in AngularJS. We split this into two parts. Part 2 will be even more advanced.

WebDesignColors - AngularJS Advanced Search - Part 1

Demo

JSON

For advanced search we will be using a JSON file to fetch the data. Lets name it as articles.json and have following data in it.

[
  {
    "title": "Basic search in AngularJS",
    "url": "http://webdesigncolors.navayan.com/angularjs-basic-search-using-filter/"
  },
  {
    "title": "AngularJS in 20 minutes",
    "url": "http://webdesigncolors.navayan.com/angularjs-in-20-minutes/"
  },
  {
    "title": "CSS arrows Sass mixin",
    "url": "http://webdesigncolors.navayan.com/css-arrows-sass-mixin/"
  },
  {
    "title": "WordPress Plugins",
    "url": "http://webdesigncolors.navayan.com/category/wordpress/wordpress-plugins/"
  },
  {
    "title": "jQuery Plugins",
    "url": "http://webdesigncolors.navayan.com/category/jquery/jquery-plugins/"
  }
]

Please note the double quotes for key-value pairs. If you use single quote, angular will throw an error SyntaxError: Unexpected token ' at Object.parse (native)

HTML

<!doctype html>
<html ng-app="webdesigncolors">
<head>
<title>Advanced Search in AngularJS - Part 1 | webdesigncolors.navayan.com</title>
</head>
<body ng-controller="wdcAdvancedSearchController">

  <form>
    <input type="search" ng-model="keyword" placeholder="Search Article" required>
    <input type="submit" value="Search" ng-click="getArticles();">
  </form>
  
  <p ng-if="!keyword">{{emptyText}}</p>
  <p>{{errorText}}</p>

  <section>
    <p>{{articles.length ? articles.length : 0}} record
       <span ng-if="articles.length > 1">s</span> found.
    </p>
    <article ng-if="articles.length" ng-repeat="article in articles">
      <a href="{{article.url}}">{{article.title}}</a>
    </article>
  </section>

</body>
</html>
  • Specify the ng-app directive and ng-controller.
  • getArticles() function call will get the search result for us.
  • If keyword field is empty {{emptyText}} expression will print a message.
  • If there is any error in fetching the data, {{errorText}} expression will print an error message.
  • {{articles.length}} expression will give us the record searched count.

AngularJS JavaScript

angular
  .module("webdesigncolors", [])
  .controller('wdcAdvancedSearchController', function ($scope, $http) {
    $scope.getArticles = function () {
      if ($scope.keyword === '' || $scope.keyword === undefined) {
        $scope.emptyText = 'Type something to search.';
        return;
      }
 
      $http
        .post('articles.json')
        .error(function (data, status) {
          $scope.errorText = 'ERROR: Cannot fetch articles.';
        })
        .success(function (data, status) {
          var articles = [];
 
          data.forEach(function(article) {
            // Search keyword at any place in article title. 
            if (article.title.toLowerCase().indexOf($scope.keyword.toLowerCase()) > -1) {
              articles.push({
                title: article.title,
                url: article.url
              });
            }
          });
 
          if (articles.length) {
            $scope.articles = articles;
          }
        });
    }
  });

Demo

You might also like: