feat: show search progressively
License: MIT
>
</div>
- <div id="result">
+ <div id="result" ref="result">
<div>
<template v-if="isEmpty">
<p>{{ text }}</p>
</div>
</template>
</template>
- <ul v-else-if="results.length > 0">
- <li v-for="(s,k) in results" :key="k">
+ <ul v-show="results.length > 0">
+ <li v-for="(s,k) in filteredResults" :key="k">
<router-link @click.native="close" :to="'./' + s.path">
<i v-if="s.dir" class="material-icons">folder</i>
<i v-else class="material-icons">insert_drive_file</i>
@@ -69,8 +69,6 @@ import { mapState, mapGetters, mapMutations } from "vuex"
import url from "@/utils/url"
import { search } from "@/api"
-// TODO: show fifty at the tie
-
var boxes = {
image: { label: "images", icon: "insert_photo" },
audio: { label: "music", icon: "volume_up" },
@@ -102,12 +100,19 @@ export default {
document.body.style.overflow = "auto"
this.reset()
+ this.value = ''
+ this.active = false
this.$refs.input.blur()
} else if (this.active) {
this.reload = false
this.$refs.input.focus()
document.body.style.overflow = "hidden"
}
+ },
+ value () {
+ if (this.results.length) {
+ this.reset()
+ }
}
},
computed: {
@@ -125,6 +130,9 @@ export default {
}
return this.value === '' ? this.$t("search.typeToSearch") : this.$t("search.pressToSearch")
+ },
+ filteredResults () {
+ return this.results.slice(0, this.resultsCount)
}
},
mounted() {
@@ -133,6 +141,12 @@ export default {
this.closeHovers()
}
})
+
+ this.$refs.result.addEventListener('scroll', event => {
+ if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 100) {
+ this.resultsCount += 50
+ }
+ })
},
methods: {
...mapMutations(["showHover", "closeHovers", "setReload"]),
@@ -157,8 +171,6 @@ export default {
this.$refs.input.focus()
},
reset () {
- this.value = ''
- this.active = false
this.ongoing = false
this.resultsCount = 50
this.results = []
@@ -177,6 +189,7 @@ export default {
this.ongoing = true
+
this.results = await search(path, this.value)
this.ongoing = false
}
