thetutlage / angular-auto-suggest Goto Github PK

Angular auto suggest is a neat template less directive to make auto suggestions on search or infact anywhere easy and super simple.

1. Keyboard Based Navigation.
2. On Click / Enter callback.
3. Supports network requests.
4. Auto abort previous requests on new request.

<auto-suggest search-url="<some_url>" search-query-parameter="<query_string_key_name>" search-select-callback="<some_callback_method>">
	<form>
		<label> Boom </label>
		<input type="text" ng-model="search.query" ng-change="makeHttpRequest()"/>
	</form>
	<ul ng-if="search.status == 'completed' ">
		<li ng-repeat="item in response" auto-suggest-item="item" ng-class="{'active':$index == activeIndex}">
			{{::item.text}}
		</li>
	</ul>
	<p ng-if="search.status == 'initialized'"> Loading ... </p>
</auto-suggest>

// Inject angular.autosuggest here
angular.module('yourApp',['angular.autosuggest']);

Above directive supports 3 parameters

1. search-url : The url to call everytime a user tries to enter something.
2. search-query-parameter : The key name to append on network call.
   Example :- example.com?query . Here query is the parameter
3. search-select-callback : Callback method to call after clicking search results or by pressing enter.

Finally you have the flexibility to decide form and result elements by urself, which means you can design them your way.

1. ng-model : Input field should have ng-model set to search.query
2. ng-change : Input field should call makeHttpRequest() on ng-change.

1. response : Response is the object which holds final result returned after http call, you can run normal ng-repeat to iterate over items.
2. auto-suggest-item : It is directive required to treat your element as the main item inside ng-repeat loop. It is required to enable keyboard interactions and execute callback method.
3. activeIndex : You can use activeIndex to match with ng-repeat $index in order to add styles to current active item.

While making http requests and display results , autoSuggest will switch it's states making easier for you to make visual changes.

1. search.status : search.status will hold all the states in form of strings.
2. idle : Idle is when nothing has happend.
3. initialized : Will be set when making http request.
4. completed : After http response, it can be error or success.