1.0.0 • Published 7 years ago

materialize.autocomplete v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
7 years ago

Autocomplete

============ A simple AngularJS directive that allows you create autocomplete input text that list of the data either from a server or local variable

installation

============ bower install material.autocomplte --save Or npm install material.autocomplte --save

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 Eg.

 var module = angular.module('testing', ['material.autocomplete']);

Usage

      <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-input-minlength="2">
      </material-autocomplete> 

Description of attributes

ParameterTypeDescriptionBinding
ac-itemsexpressionAn expression in the format of item in items to iterate over matches for your search.=
ac-input-namestringThe name attribute given to the input element to be used with FormControlle.@
ac-selected-itemobjectA model to be bind which is selected item.=
ac-display-propertystringA list of the item diaplay use property name@
ac-selected-item-changeexpressionAn expression to be run each time a new item is selected.&
ac-search-textexpressionA model to bind the search query text to=
ac-remote-methodexpressionHandle the searchText result and provide the result@
ac-place-holderstringSecondary Placeholder text that will display after label move@
ac-input-minlengthnumberThe minimum length for the input's value for validation@
ac-show-input-namestringInput text for the hiding secondary palceholder=
ac-dropdown-itemsexpressionFor the calculate dropdown height=
ac-clear-buttonexpressionClear the inputtext if selected value is there=
ac-min-lengthnumberSpecifies 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

Demo

============ ###1. screen shot 2017-01-25 at 1 21 51 am

###2. screen shot 2017-01-25 at 1 20 59 am

###3. screen shot 2017-01-25 at 1 21 34 am

###4. screen shot 2017-01-25 at 1 22 20 am

###5. screen shot 2017-01-25 at 1 37 23 am