Adds search hints / suggestions while typing

This commit is contained in:
booploops 2021-12-08 23:20:33 -08:00
parent 4e7e28ef07
commit ee6a3ba499
3 changed files with 53 additions and 1 deletions

View file

@ -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