diff --git a/docs/src/pages/components/Input.vue b/docs/src/pages/components/Input.vue
index 8c39e53..c6eeba0 100644
--- a/docs/src/pages/components/Input.vue
+++ b/docs/src/pages/components/Input.vue
@@ -98,6 +98,126 @@
+
+
+
+
+ Name
+ Type
+ Description
+
+
+
+
+
+ v-model
+ String
+ A required model object to bind the value.
+
+
+
+ debounce
+ Number
+ Sets the debounce time. Default 1000 milliseconds
+
+
+
+ fetch
+ Function
+ Sets the fetch function mdAutocomplete will call after the debounce is reached. Chosing fetch prop disables the use of either list and filterList props.
+
+
+
+ list
+ Array
+ Sets an array of possible values. Default []. MdAutocomplete will only search in this list if it's set. Chosing list prop disables the use of fetch prop.
+
+
+
+ filter-list
+ Function
+ Sets a filter function which will be used to filter the list props. Chosing filterList prop requires the use of list props and disables the use of fetch prop.
+
+
+
+ min-chars
+ Number
+ Sets the minimum number of characters before making opening the autocomplete options or making a request. Default 3
+
+
+
+ prepare-response-data
+ Function
+ This function will be called once the fetch prop has a response. It can manipulate the data received from the server. The output should always be an Array.
+
+
+
+ print-attribute
+ String
+ This prop will be used to print values on the autocomplete list. It shall match an object key expected on the fetch result list. Default name
+
+
+
+ query-param
+ String
+ Sets the query parameter. Example: http//api.com/q?=SOMETHING. Default q
+
+
+
+ disabled
+ Boolean
+ Disable the input and prevent his actions. Default false
+
+
+
+ required
+ Boolean
+ Apply the required rule to style the label with an "*". Default false
+
+
+
+ placeholder
+ String
+ Sets the placeholder.
+
+
+
+ maxlength
+ Number
+ Sets the maxlength and enable the text counter.
+
+
+
+
+
+
+
+ Name
+ Value
+ Description
+
+
+
+
+
+ change
+ The String selected
+ Triggered when the user selects an item from the autocomplete list
+
+
+ input
+ The String selected
+ Triggered when the user selects an item from the autocomplete list
+
+
+ selected
+ Emits the Object as well as the String selected.
+ Triggered when the user selects an item from the autocomplete list
+
+
+
+
+
@@ -154,12 +274,7 @@
-
-
-
-
-
-
+
@@ -197,6 +312,11 @@
<md-input v-model="initialValue"></md-input>
</md-input-container>
+ <md-input-container>
+ <label>Autocomplete (with fetch)</label>
+ <md-input v-model="autocompleteValue" :fetch="fetchFunction"></md-input>
+ </md-input-container>
+
<md-input-container>
<label>With label</label>
<md-input placeholder="My nice placeholder"></md-input>
@@ -230,7 +350,19 @@
return {
initialValue: 'My initial value'
};
- }
+ },
+ methods: {
+ fetchFunction(param) {
+ // param = { queryParam: query }
+
+ // 'fetchAutocomplete' should return a Promise.
+
+ // md-autocomplete will call fetchAutocomplete and pass
+ // 'param' as an argument.
+ // the 'param' is composed by a query param and
+ // a query.
+ },
+ },
};