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

| 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