https://github.com/shoppinpal/materializecss-autocomplete
Small material design autocomplete library for materializecss
https://github.com/shoppinpal/materializecss-autocomplete
angularjs angularjs-directives autocomplete autocomplete-template material material-design-autocomplete material-desing materializecss-autocomplete materiazecss
Last synced: over 1 year ago
JSON representation
Small material design autocomplete library for materializecss
- Host: GitHub
- URL: https://github.com/shoppinpal/materializecss-autocomplete
- Owner: ShoppinPal
- License: mit
- Created: 2017-01-17T10:45:09.000Z (over 9 years ago)
- Default Branch: develop
- Last Pushed: 2017-09-18T14:52:02.000Z (over 8 years ago)
- Last Synced: 2025-03-10T00:55:28.271Z (over 1 year ago)
- Topics: angularjs, angularjs-directives, autocomplete, autocomplete-template, material, material-design-autocomplete, material-desing, materializecss-autocomplete, materiazecss
- Language: JavaScript
- Homepage: https://shoppinpalautocomplete.herokuapp.com/#/auto
- Size: 24.9 MB
- Stars: 12
- Watchers: 8
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# 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``` , ```profileTemplete``` and ```colorTemplate```.
* 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:
```html
```
For npm installation
```html
```
**3. Include the module as a dependency in your app**
```javascript
var module = angular.module('testing', ['material.autocomplete']);
```
###Methods
### Remote Usage
For the simple Autocomplete template
```html
```
Demo screenShots:
### Local Usage
###For the color Autocomplete template
```html
```
Demo screenShots:
###For the profile Autocomplete template
```html
```
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
```