A directive for AngularJS providing a advanced visual search box.
Include with bower
bower install angular-advanced-searchboxThe 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']);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.
- 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
paramsfor Angular's$httpAPI - Twitter Bootstrap compatible markup
- Works perfectly together with angular-paginate-anything (use
ng-modelasurl-params)
| 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 |