NOTICE

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

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