A simple AngularJS module that allows you to create fast and very simple autocomplete Components to use in your application.
- jquery
- angular 1.x
- underscore
Clone the repository
$ git clone https://github.com/Alberto-/angular-autocomplete.gitInclude both angular_autocomplete.js and angular_autocomplete.css files.
Then inject the autocompleteComponent module in your app.
var myApp = angular.module('autocompleteExample',['autocompleteComponent']);
Now you can use the directive <autocomplete>
The autocomplete directive accepts two special attributes,
autocompletelist and callback:
-
autocompletelist must contain a JSON array with your own elements list. Every JSON object must have an "id" and a "value" properties, like: {"id": "itemID", "value" : "item description"}
-
callback will contain a custom function you want call when you select an element in the list.
so here an example of your JS file:
myApp.controller("exampleController",["$scope" ,function($scope){
$scope.mycallback = function(param){
alert("Your element: "+ JSON.stringify(param));
}
$scope.UScountries = [
{
"value": "Arizona",
"id": "AZ"
},
{
"value": "California",
"id": "CA"
},
{
"value": "Colorado",
"id": "CO"
}
];
}]);
Here the corresponding HTML code:
<autocomplete autocompletelist='UScountries' callback="mycallback(param)"></autocomplete>
This is a very simple autocomplete, in 3 or 4 steps you have a simple autocomplete working!
It's so easy as Renato Pozzetto does the dishes (in "Le Comiche" film).
You can find the real example within the index.html and example.js files.
To run it locally you can use http-server
nmp install -g http-serverand then, from the project root
http-server -a 0.0.0.0 -p 8000your demo will run under
http://localhost:8000/index.html
Coming soon ..
1.0
MIT