Skip to content

Commit 1bb1616

Browse files
committed
Add initial readme
1 parent 4c275a9 commit 1bb1616

File tree

1 file changed

+74
-0
lines changed

1 file changed

+74
-0
lines changed

README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
## Angular Advanced Searchbox
2+
[![Build Status](https://travis-ci.org/dnauck/angular-advanced-searchbox.png?branch=master)](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

Comments
 (0)