/angular-advanced-searchbox

A directive for AngularJS providing a advanced visual search box

Primary LanguageHTMLMIT LicenseMIT

Angular Advanced Searchbox

Build Status

A directive for AngularJS providing a advanced visual search box.

DEMO

Usage

Include with bower

bower install angular-advanced-searchbox

The bower package contains files in the dist/directory with the following names:

  • angular-advanced-searchbox.js
  • angular-advanced-searchbox.min.js
  • angular-advanced-searchbox-tpls.js
  • angular-advanced-searchbox-tpls.min.js

Files with the min suffix are minified versions to be used in production. The files with -tpls in their name have the directive template bundled. If you don't need the default template use the angular-paginate-anything.min.js file and provide your own template with the templateUrl attribute.

Load the javascript and css and declare your Angular dependency

<link rel="stylesheet" href="bower_components/angular-advanced-searchbox/dist/angular-advanced-searchbox.min.css">
<script src="bower_components/angular-advanced-searchbox/dist/angular-advanced-searchbox-tpls.min.js"></script>
angular.module('myModule', ['angular-advanced-searchbox']);

Define the available search parameters in your controller:

$scope.availableSearchParams = [
          { key: "name", name: "Name", placeholder: "Name..." },
          { key: "city", name: "City", placeholder: "City..." },
          { key: "country", name: "Country", placeholder: "Country..." },
          { key: "emailAddress", name: "E-Mail", placeholder: "E-Mail..." },
          { key: "job", name: "Job", placeholder: "Job..." }
        ];

Then in your view

<nit-advanced-searchbox
	ng-model="searchParams"
	parameters="availableSearchParams"
	placeholder="Search...">
</nit-advanced-searchbox>

The angular-advanced-searchbox directive uses an external template stored in angular-advanced-searchbox.html. Host it in a place accessible to your page and set the template-url attribute. Note that the url param can be a scope variable as well as a hard-coded string.

Benefits

  • Handles free text search and/or parameterized searches
  • Provides suggestions on available search parameters
  • Easy to use with mouse or keyboard
  • Model could easily be used as params for Angular's $http API
  • Twitter Bootstrap compatible markup
  • Works perfectly together with angular-paginate-anything (use ng-model as url-params)

Directive Attributes

Name Description
ng-model Search parameters as object that could be used as params with Angular's $http API.
parameters List of available parameters to search for.
placeholder specifies a short hint in the search box