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

1. Include angularjs-autocomplete.min.js
<script src="http://rawgit.com/allenhwkim/angularjs-autocomplete.min.js"></script>

2. add it as a dependency
   var myApp = angular.module('myApp', ['angularjs-autocomplete']);

3. 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

    • e.g., "http://maps.googleapis.com/maps/api/geocode/json?address=:keyword"

  • 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.

License

MIT License