Autocomplete
============ A simple AngularJS directive that allows you create autocomplete input text that list of the data either from a server or local variable
To see a demo go here: https://shoppinpalautocomplete.herokuapp.com/#/auto
Features:
- custom template support.
- can show suggestion as a hint .
- keyboard and mouse control.
- works in legacy browsers.
- Auto match.
- Clear on selection: when you select an item, input field is cleared.
- custom selection of the templete
simpleTemplete,profileTempleteandcolorTemplate. - Blur event handling.
- Show scrollbar.
- Show all items.
- input minimum length to display
itemList.
Requirements: AngularJS 1.4.x
installation
============
Getting Started
Download the code, and include the autocomplete.min.js file in your page. Then add the material.autocomplte module to your Angular App file
1. Download via npm or bower
bower install materialized.autocomplete --save
Or
npm install materialized.autocomplete --save
2. Link the files in the page header
For bower installation:
<script src="bower_components/materialized.autocomplete/autocomplete/autocomplete.min.js"></script>
<link rel="stylesheet" href="bower_components/materialized.autocomplete/autocomplete/css/autocomplete.min.css">For npm installation
<script src="node_modules/materialized.autocomplete/autocomplete/autocomplete.min.js"></script>
<link rel="stylesheet" href="node_modules/materialized.autocomplete/autocomplete/css/autocomplete.min.css">3. Include the module as a dependency in your app
var module = angular.module('testing', ['material.autocomplete']);###Methods
Remote Usage
For the simple Autocomplete template
<material-autocomplete
ac-input-name="Products"
ac-items="test.productList"
ac-selected-item="test.dataResultprod"
ac-display-property="name"
ac-selected-item-change="test.fetchProductList(test.productList)"
ac-search-text="test.searchTextProduct"
ac-remote-method="test.fetchDataFromServer(test.searchTextProduct)"
ac-place-holder=" 🔍 Search the items here...."
ac-min-length="2">
</material-autocomplete> Demo screenShots:
Local Usage
###For the color Autocomplete template
<material-autocomplete
ac-input-name="color"
ac-items="test.color"
ac-display-property="name"
ac-display-color="color"
ac-search-text="test.searchCol"
ac-min-length="1"
ac-place-holder=" 🔍 Color Autocomplete "
ac-template-style="colorTemplate">
</material-autocomplete>Demo screenShots:
###For the profile Autocomplete template
<material-autocomplete
ac-input-name="people"
ac-items="test.people"
ac-display-property="name"
ac-display-email="email"
ac-display-picture="picture"
ac-search-text="test.searchPeople"
ac-min-length="1"
ac-place-holder=" 🔍 Profile Autocomplete "
ac-template-style="profileTemplate">
</material-autocomplete>
Demo screenShots:
Description of attributes
| Parameter | Type | Description |
|---|---|---|
| ac-items | expression |
An expression in the format of item in items to iterate over matches for your search. |
| ac-input-name | string |
The name attribute given to the input element to be used with FormControlle. |
| ac-selected-item | object |
A model to be bind which is selected item. |
| ac-display-property | string |
item diaplay use property name |
| ac-display-email | string |
item diaplay use property email |
| ac-display-picture | string |
item diaplay use property picture |
| ac-display-color | string |
A list of the item diaplay for the color code |
| ac-selected-item-change | expression |
An expression to be run each time a new item is selected. |
| ac-search-text | expression |
A model to bind the search query text to |
| ac-remote-method | expression |
Handle the searchText result and provide the result |
| ac-place-holder | string |
Secondary Placeholder text that will display after label move |
| ac-show-input-name | string |
Input text for the hiding secondary palceholder |
| ac-dropdown-items | expression |
For the calculate dropdown height |
| ac-clear-button | expression |
Clear the inputtext if selected value is there |
| ac-min-length | number |
Specifies the minimum length of text before autocomplete will make suggestions |
Running test suite
In order to run tests clone repository and run following commands within repo's directory:
1. npm install
2. bower install
3. grunt
