Adds search hints / suggestions while typing
This commit is contained in:
parent
4e7e28ef07
commit
ee6a3ba499
3 changed files with 53 additions and 1 deletions
|
@ -124,10 +124,19 @@
|
|||
<div class="search-input-container">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search" spellcheck="false" @click="showSearch()"
|
||||
@change="showSearch();searchQuery()" placeholder="Search..." v-model="search.term"
|
||||
@focus="search.showHints = true"
|
||||
@blur="setTimeout(()=>{search.showHints = false}, 100)"
|
||||
@change="showSearch();searchQuery()" @input="getSearchHints()" placeholder="Search..." v-model="search.term"
|
||||
class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
|
||||
<div class="search-hints">
|
||||
<button class="search-hint" v-for="hint in search.hints" @click="search.term = hint;search.showHints = false;searchQuery()">
|
||||
{{ hint }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-sidebar-content">
|
||||
<div class="app-sidebar-header-text">
|
||||
Apple Music
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue