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:

<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=" &#128269; &nbsp; &nbsp; 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=" &#128269; &nbsp; &nbsp; 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=" &#128269; &nbsp; &nbsp; Profile Autocomplete "
        ac-template-style="profileTemplate">
      </material-autocomplete>

Demo screenShots:

Description of attributes

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