Skip to content

Commit c36b183

Browse files
author
Pablo Henrique
authored
Merge pull request vuematerial#644 from pablohpsilva/autocomplete
md-autocomplete component
2 parents 1450ea7 + ac0a08d commit c36b183

File tree

5 files changed

+451
-2
lines changed

5 files changed

+451
-2
lines changed

‎docs/src/pages/components/Input.vue

Lines changed: 170 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,126 @@
110110
</md-table>
111111
</api-table>
112112

113+
<api-table name="md-autocomplete">
114+
<md-table slot="properties">
115+
<md-table-header>
116+
<md-table-row>
117+
<md-table-head>Name</md-table-head>
118+
<md-table-head>Type</md-table-head>
119+
<md-table-head>Description</md-table-head>
120+
</md-table-row>
121+
</md-table-header>
122+
123+
<md-table-body>
124+
<md-table-row>
125+
<md-table-cell>v-model</md-table-cell>
126+
<md-table-cell><code>String</code></md-table-cell>
127+
<md-table-cell>A required model object to bind the value.</md-table-cell>
128+
</md-table-row>
129+
130+
<md-table-row>
131+
<md-table-cell>debounce</md-table-cell>
132+
<md-table-cell><code>Number</code></md-table-cell>
133+
<md-table-cell>Sets the debounce time. Default <code>1000</code> milliseconds</md-table-cell>
134+
</md-table-row>
135+
136+
<md-table-row>
137+
<md-table-cell>fetch</md-table-cell>
138+
<md-table-cell><code>Function</code></md-table-cell>
139+
<md-table-cell>Sets the fetch function mdAutocomplete will call after the debounce is reached. Chosing <code>fetch</code> prop <strong>disables</strong> the use of either <code>list</code> and <code>filterList</code> props.</md-table-cell>
140+
</md-table-row>
141+
142+
<md-table-row>
143+
<md-table-cell>list</md-table-cell>
144+
<md-table-cell><code>Array</code></md-table-cell>
145+
<md-table-cell>Sets an array of possible values. Default <code>[]</code>. MdAutocomplete will only search in this list if it's set. Chosing <code>list</code> prop <strong>disables</strong> the use of <code>fetch</code> prop.</md-table-cell>
146+
</md-table-row>
147+
148+
<md-table-row>
149+
<md-table-cell>filter-list</md-table-cell>
150+
<md-table-cell><code>Function</code></md-table-cell>
151+
<md-table-cell>Sets a filter function which will be used to filter the <code>list</code> props. Chosing <code>filterList</code> prop <strong>requires</strong> the use of <code>list</code> props and <strong>disables</strong> the use of <code>fetch</code> prop.</md-table-cell>
152+
</md-table-row>
153+
154+
<md-table-row>
155+
<md-table-cell>min-chars</md-table-cell>
156+
<md-table-cell><code>Number</code></md-table-cell>
157+
<md-table-cell>Sets the minimum number of characters before making opening the autocomplete options or making a request. Default <code>3</code></md-table-cell>
158+
</md-table-row>
159+
160+
<md-table-row>
161+
<md-table-cell>prepare-response-data</md-table-cell>
162+
<md-table-cell><code>Function</code></md-table-cell>
163+
<md-table-cell>This function will be called once the <code>fetch</code> prop has a response. It can manipulate the data received from the server. The output should always be an <code>Array</code>.</md-table-cell>
164+
</md-table-row>
165+
166+
<md-table-row>
167+
<md-table-cell>print-attribute</md-table-cell>
168+
<md-table-cell><code>String</code></md-table-cell>
169+
<md-table-cell>This prop will be used to print values on the autocomplete list. It shall match an object key expected on the <code>fetch</code> result list. Default <code>name</code></md-table-cell>
170+
</md-table-row>
171+
172+
<md-table-row>
173+
<md-table-cell>query-param</md-table-cell>
174+
<md-table-cell><code>String</code></md-table-cell>
175+
<md-table-cell>Sets the query parameter. Example: http//api.com/<strong>q</strong>?=SOMETHING. Default <code>q</code></md-table-cell>
176+
</md-table-row>
177+
178+
<md-table-row>
179+
<md-table-cell>disabled</md-table-cell>
180+
<md-table-cell><code>Boolean</code></md-table-cell>
181+
<md-table-cell>Disable the input and prevent his actions. Default <code>false</code></md-table-cell>
182+
</md-table-row>
183+
184+
<md-table-row>
185+
<md-table-cell>required</md-table-cell>
186+
<md-table-cell><code>Boolean</code></md-table-cell>
187+
<md-table-cell>Apply the required rule to style the label with an "*". Default <code>false</code></md-table-cell>
188+
</md-table-row>
189+
190+
<md-table-row>
191+
<md-table-cell>placeholder</md-table-cell>
192+
<md-table-cell><code>String</code></md-table-cell>
193+
<md-table-cell>Sets the placeholder.</md-table-cell>
194+
</md-table-row>
195+
196+
<md-table-row>
197+
<md-table-cell>maxlength</md-table-cell>
198+
<md-table-cell><code>Number</code></md-table-cell>
199+
<md-table-cell>Sets the maxlength and enable the text counter.</md-table-cell>
200+
</md-table-row>
201+
</md-table-body>
202+
</md-table>
203+
204+
<md-table slot="events">
205+
<md-table-header>
206+
<md-table-row>
207+
<md-table-head>Name</md-table-head>
208+
<md-table-head>Value</md-table-head>
209+
<md-table-head>Description</md-table-head>
210+
</md-table-row>
211+
</md-table-header>
212+
213+
<md-table-body>
214+
<md-table-row>
215+
<md-table-cell>change</md-table-cell>
216+
<md-table-cell>The <code>String</code> selected</md-table-cell>
217+
<md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
218+
</md-table-row>
219+
<md-table-row>
220+
<md-table-cell>input</md-table-cell>
221+
<md-table-cell>The <code>String</code> selected</md-table-cell>
222+
<md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
223+
</md-table-row>
224+
<md-table-row>
225+
<md-table-cell>selected</md-table-cell>
226+
<md-table-cell>Emits the <code>Object</code> as well as the <code>String</code> selected.</md-table-cell>
227+
<md-table-cell>Triggered when the user selects an item from the autocomplete list</md-table-cell>
228+
</md-table-row>
229+
</md-table-body>
230+
</md-table>
231+
</api-table>
232+
113233
<api-table name="md-textarea">
114234
<md-table slot="properties">
115235
<md-table-header>
@@ -181,6 +301,11 @@
181301
<md-input v-model="initialValue" readonly></md-input>
182302
</md-input-container>
183303

304+
<md-input-container>
305+
<label>Autocomplete (with fetch)</label>
306+
<md-autocomplete v-model="autocompleteValue" :fetch="fetchAutocomplete"></md-autocomplete>
307+
</md-input-container>
308+
184309
<md-input-container>
185310
<label>With label</label>
186311
<md-input placeholder="My nice placeholder"></md-input>
@@ -216,6 +341,11 @@
216341
&lt;md-input v-model=&quot;initialValue&quot;&gt;&lt;/md-input&gt;
217342
&lt;/md-input-container&gt;
218343

344+
&lt;md-input-container&gt;
345+
&lt;label&gt;Autocomplete (with fetch)&lt;/label&gt;
346+
&lt;md-input v-model=&quot;autocompleteValue&quot; :fetch=&quot;fetchFunction&quot;&gt;&lt;/md-input&gt;
347+
&lt;/md-input-container&gt;
348+
219349
&lt;md-input-container&gt;
220350
&lt;label&gt;With label&lt;/label&gt;
221351
&lt;md-input placeholder=&quot;My nice placeholder&quot;&gt;&lt;/md-input&gt;
@@ -249,7 +379,19 @@
249379
return {
250380
initialValue: &apos;My initial value&apos;
251381
};
252-
}
382+
},
383+
methods: {
384+
fetchFunction(param) {
385+
// param = { queryParam: query }
386+
387+
// &apos;fetchAutocomplete&apos; should return a Promise.
388+
389+
// md-autocomplete will call fetchAutocomplete and pass
390+
// &apos;param&apos; as an argument.
391+
// the &apos;param&apos; is composed by a query param and
392+
// a query.
393+
},
394+
},
253395
};
254396
</code-block>
255397
</div>
@@ -479,8 +621,34 @@
479621
export default {
480622
data() {
481623
return {
482-
initialValue: 'My initial value'
624+
autocompleteValue: '',
625+
initialValue: 'My initial value',
626+
listAutocomplete: [
627+
{name: 'oi'},
628+
{name: 'hello'},
629+
{name: 'salut'}
630+
]
483631
};
632+
},
633+
methods: {
634+
fetchAutocomplete(param) {
635+
const myInit = {
636+
method: 'GET',
637+
headers: new Headers(),
638+
mode: 'cors',
639+
cache: 'default'
640+
};
641+
const url = 'https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search';
642+
const queryParam = Object.keys(param)[0];
643+
const queryValue = param[queryParam];
644+
const queryUrl = `${url}?${queryParam}=${queryValue}`;
645+
646+
return window.fetch(queryUrl, myInit)
647+
.then((res) => res.json());
648+
},
649+
filterList(list, query) {
650+
return list.filter((el) => el.name.indexOf(query) !== -1);
651+
}
484652
}
485653
};
486654
</script>

‎src/components/mdInputContainer/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import mdInputContainer from './mdInputContainer.vue';
22
import mdInput from './mdInput.vue';
3+
import mdAutocomplete from './mdAutocomplete.vue';
34
import mdTextarea from './mdTextarea.vue';
45
import mdInputContainerTheme from './mdInputContainer.theme';
56

67
export default function install(Vue) {
78
Vue.component('md-input-container', mdInputContainer);
89
Vue.component('md-input', mdInput);
10+
Vue.component('md-autocomplete', mdAutocomplete);
911
Vue.component('md-textarea', mdTextarea);
1012

1113
Vue.material.styles.push(mdInputContainerTheme);

0 commit comments

Comments
 (0)