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