JarCastingNOTICE
Although the example is working well, this repository is not well maintained well at this moment. Please use it at your own risk or become the admin of this module if you want to.
AngularJS Autocomplete
autocomplete for INPUT and SELECT tag for single/multi, local/remote
Features
- We can simply just set autocomplete feature to INPUT and SELECT tag
- It does not require more tags such as <ui-select-match>, <ui-select-choices>, or <autocomplete>
- It treat SELECT element as select element, and INPUT element as INPUT element
Examples
 |
Auto Complete INPUT tag <div auto-complete source="source">
<input ng-model="foo" placeholder="Select">
</div>
|
 |
Auto Complete SELECT tag <div auto-complete source="source"
placeholder="Select Bar">
<select ng-model="bar"></select>
</div>
|
 |
Google Address Complete Example <div auto-complete source="source"
path-to-data="results" min-chars="2"
display-property="formatted_address"
placeholder="Enter Address">
<input id="ip" ng-model="addressText" name="addressText">
</div>
|
 |
Multiple Autocomplete <div auto-complete-multi
placeholder="Select One" source="source">
<select ng-model="foo"></select>
</div>
|
 |
Custom Multi-Autocomplete <div>
<span ng-repeat="obj in foo5 track by $index">
{{'('+obj.key+') '+obj.text}})
<a href="" ng-click="foo5.splice($index, 1)">x</a>
</span>
<auto-complete-div multiple ng-model="foo5"
default-style="false" source="source3">
<input size="2" />
<ul></ul>
</auto-complete-div>
</div>
|
To Get Started
For Bower users,
$ bower install angularjs-autocomplete
-
Include
angularjs-autocomplete.min.js
<script src="http://rawgit.com/allenhwkim/angularjs-autocomplete.min.js"></script> -
add it as a dependency
var myApp = angular.module('myApp', ['angularjs-autocomplete']); -
Use it
$scope.listOfChoices = ['this', 'is', 'list', 'of', 'choices];<input auto-complete source="listOfChoices">
Attributes
-
source(required) : scope variable or function which is identified as a source of autocomplete It coule be array, url, or a function
-
array example:
- ["this", "is", "array", "of", "text"]
- [{id:1, value:'One'}, {id:2, value:'Two'}, {id:3, value:'Three'}, {id:4, value:'Four'}]
-
url example
-
function example * function(param) { return $http.get("http://maps.googleapis.com/maps/api/geocode/json?address="+param.keyword); }
$resource("http://maps.googleapis.com/maps/api/geocode/json?address=:keyword", {keyword:'@keyword'}).get
-
-
ng-model(optional) : ng-model for INPUT or SELECT element
-
value-Changed(optional) : callback function when value is changed. Takes an argument as selected value. In example,
$scope.callback = function(arg) { $scope.selected = arg; }; -
default-style(optional) : true as default. For your own styling, set
default-style="false"and provide your own css.
The example of customized css style is found at custom multiple select.
You can also find default-style for starting point. -
value-property(optional): "id" as default. When you define an array of hashes as source, the key of hash for ng-model value.
e.g., 'key' -
display-property(optional) : "value" as default. When you define an array of hashes as source, the key of hash for display.
e.g., 'text' -
min-chars(optional): 0 as default, if defined, autocomplete won't show any until length of input is greater than minimum charaters.