|
14 | 14 | </div> |
15 | 15 |
|
16 | 16 | <div class="page-container-section"> |
17 | | - <h2>Static Data</h2> |
| 17 | + <h2 id="staticData">Static Data</h2> |
18 | 18 |
|
19 | 19 | <p>If you have a small amount of data or if it's static, you can pass the options to <code>md-autocomplete</code> in a simple and intuitive way:</p> |
20 | 20 | <code-example title="Normal and Dense" :component="examples['autocomplete-static']" /> |
21 | 21 | </div> |
22 | 22 |
|
23 | 23 | <div class="page-container-section"> |
24 | | - <h2>Trigger</h2> |
| 24 | + <h2 id="trigger">Trigger</h2> |
25 | 25 |
|
26 | 26 | <p>By default the suggestions will appear along with a focus trigger. If you want something less intrusive, you can disable this behaviour by canceling the focus event. If this, the suggestions will appear right after a keystroke:</p> |
27 | 27 | <code-example title="Focus vs Input" :component="examples['autocomplete-trigger']" /> |
28 | 28 | </div> |
29 | 29 |
|
30 | 30 | <div class="page-container-section"> |
31 | | - <h2>Box Layout</h2> |
| 31 | + <h2 id="boxLayout">Box Layout</h2> |
32 | 32 |
|
33 | 33 | <p>Autocomplete have types two layouts: Default with floating labels and a boxed layout with inline labels. The box layout will apply a boxed layout with a small elevation, that also works really great as search bar inside a toolbar. Gorgeous:</p> |
34 | 34 | <code-example title="Works with dense variant too!" :component="examples['autocomplete-box']" /> |
35 | 35 | </div> |
36 | 36 |
|
37 | 37 | <div class="page-container-section"> |
38 | | - <h2>Custom Template</h2> |
| 38 | + <h2 id="customTemplate">Custom Template</h2> |
39 | 39 |
|
40 | 40 | <note-block alert>This section will assume that you have knowledge of <a href="https://vuejs.org/v2/guide/components.html#Scoped-Slots" target="_blank">Vue Scoped Slots</a>. This will allow you to customize the option list.</note-block> |
41 | 41 | <p>Autocomplete also accepts a custom template, flexible to accept any HTML element and with an 'empty state' built in. You can also highlight the search term inside the matches, to give a feedback on why that item has been in the results. Awesome:</p> |
|
44 | 44 | </div> |
45 | 45 |
|
46 | 46 | <div class="page-container-section search-algorithms"> |
47 | | - <h2>Search Algorithms</h2> |
| 47 | + <h2 id="search-algorithms">Search Algorithms</h2> |
48 | 48 |
|
49 | 49 | <p>Vue Material autocomplete comes with 2 ways of search: <a href="https://en.wikipedia.org/wiki/Approximate_string_matching" target="_blank">Fuzzy search</a> and search by whole term. The fuzzy search tries to match the results by approximation, finding patterns inside the available options. This will help with accidental type errors and improve the results. If you think that this may be confusing, you can disable this. Example:</p> |
50 | 50 | <div class="md-layout md-gutter"> |
|
85 | 85 | </div> |
86 | 86 |
|
87 | 87 | <div class="page-container-section"> |
88 | | - <h2>Async Options</h2> |
| 88 | + <h2 id="async-options">Async Options</h2> |
89 | 89 |
|
90 | 90 | <p>Sometimes the options are inside a database in a remote server. Instead of giving a static data, we can provide a <code>Promise</code> that will resolve with the data from a backend servide, for example. This is great to save Bandwidth on the initial load and to improve the performance. Look at this example:</p> |
91 | 91 | <code-example title="Spinner Loading" :component="examples['autocomplete-async']" /> |
|
0 commit comments