|
| 1 | +## Angular Advanced Searchbox |
| 2 | +[](https://travis-ci.org/dnauck/angular-advanced-searchbox) |
| 3 | + |
| 4 | +A directive for AngularJS providing a advanced visual search box. |
| 5 | + |
| 6 | +### [DEMO](http://dnauck.github.io/angular-advanced-searchbox/) |
| 7 | + |
| 8 | +### Usage |
| 9 | + |
| 10 | +Include with bower |
| 11 | + |
| 12 | +```sh |
| 13 | +bower install angular-advanced-searchbox |
| 14 | +``` |
| 15 | + |
| 16 | +Load the javascript and css and declare your Angular dependency |
| 17 | + |
| 18 | +```html |
| 19 | +<link rel="stylesheet" href="angular-advanced-searchbox.min.css"> |
| 20 | +<script src="angular-advanced-searchbox.min.js"></script> |
| 21 | +``` |
| 22 | + |
| 23 | +```js |
| 24 | +angular.module('myModule', ['angular-advanced-searchbox']); |
| 25 | +``` |
| 26 | + |
| 27 | +Then in your view |
| 28 | + |
| 29 | +```html |
| 30 | +<nit-advanced-searchbox |
| 31 | + ng-model="searchParams" |
| 32 | + parameters="availableSearchParams" |
| 33 | + placeholder="Search..."> |
| 34 | +</nit-advanced-searchbox> |
| 35 | +``` |
| 36 | + |
| 37 | +The `angular-advanced-searchbox` directive uses an external template stored in |
| 38 | +`angular-advanced-searchbox.html`. Host it in a place accessible to |
| 39 | +your page and set the `template-url` attribute. Note that the `url` |
| 40 | +param can be a scope variable as well as a hard-coded string. |
| 41 | + |
| 42 | +### Benefits |
| 43 | + |
| 44 | +* Handles free text search and/or parameterized searches |
| 45 | +* Provides suggestions on available search parameters |
| 46 | +* Easy to use with mouse or keyboard |
| 47 | +* Model could easily be used as ```params``` for Angular's ```$http``` API |
| 48 | +* Twitter Bootstrap compatible markup |
| 49 | +* Works perfectly together with [angular-paginate-anything](https://github.com/begriffs/angular-paginate-anything) (use ```ng-model``` as ```url-params```) |
| 50 | + |
| 51 | +### Directive Attributes |
| 52 | + |
| 53 | +<table> |
| 54 | + <thead> |
| 55 | + <tr> |
| 56 | + <th>Name</th> |
| 57 | + <th>Description</th> |
| 58 | + </tr> |
| 59 | + </thead> |
| 60 | + <tbody> |
| 61 | + <tr> |
| 62 | + <td>ng-model</td> |
| 63 | + <td>Search parameters as object that could be used as <i>params</i> with Angular's <i>$http</i> API.</td> |
| 64 | + </tr> |
| 65 | + <tr> |
| 66 | + <td>parameters</td> |
| 67 | + <td>List of available parameters to search for.</td> |
| 68 | + </tr> |
| 69 | + <tr> |
| 70 | + <td>placeholder</td> |
| 71 | + <td>specifies a short hint in the search box</td> |
| 72 | + </tr> |
| 73 | + </tbody> |
| 74 | +</table> |
0 commit comments