# materializecss-autocomplete
> angularjs autocomplete
Latest version **1.0.8** (published 2017-06-23) · MIT license · 0 weekly downloads
## Install
```sh
npm install materializecss-autocomplete
pnpm add materializecss-autocomplete
yarn add materializecss-autocomplete
bun add materializecss-autocomplete
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.8 |
| Published | 2017-06-23 |
| First published | 2017-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Shoppinpal |
| Maintainers | shoppinpal |
| Keywords | html, javascript, css |
## Links
- npm: https://www.npmjs.com/package/materializecss-autocomplete
- Repository: https://github.com/ShoppinPal/AutoComplete
- Homepage: https://github.com/ShoppinPal/AutoComplete#readme
- Issues: https://github.com/ShoppinPal/AutoComplete/issues
- npm.io page: https://npm.io/package/materializecss-autocomplete
## Dependencies (1)
- [materialize-css](https://npm.io/package/materialize-css.md) ^0.97.7
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 1.0.8 (latest) — 2017-06-23
- 1.0.7 — 2017-06-23
- 1.0.5 — 2017-06-03
- 1.0.4 — 2017-05-30
- 1.0.3 — 2017-05-25
- 1.0.2 — 2017-05-14
## 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
```
---
_Source: https://npm.io/package/materializecss-autocomplete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._