aboutsummaryrefslogtreecommitdiff
path: root/src/components/autosuggest/autosuggest.js
diff options
context:
space:
mode:
authorHenry Jameson <me@hjkos.com>2019-06-16 20:24:03 +0300
committerHenry Jameson <me@hjkos.com>2019-06-16 20:24:03 +0300
commitb00da1778830853e0bed4cb1d0fa93ca09a82167 (patch)
tree8072f743384b45dc2b4a62e619bb0b1db3e3ebf9 /src/components/autosuggest/autosuggest.js
parent6c7cf7d9b5f2faec03fe75881b5ec81e0ac851fd (diff)
parent1db3c785d805bfe1e7bb09f2d85875448cb03f9a (diff)
Merge remote-tracking branch 'upstream/develop' into docs
* upstream/develop: (374 commits) fix typo rename mutations according to actual property names fix fix fix logged out post-update fix user banner fix AMERICA comments No longer sending extra data, renamed some properties Revert "add TOTP/Recovery Form for mobile version" Apply suggestion to src/services/entity_normalizer/entity_normalizer.service.js i18n/Update Japanese translation render modal at the root level using portal install portal vue Small improve of the who to follow panel layout Fix/Small fix in the who to follow page remove console spam i18n wire up user.description with masto api data ...
Diffstat (limited to 'src/components/autosuggest/autosuggest.js')
-rw-r--r--src/components/autosuggest/autosuggest.js52
1 files changed, 52 insertions, 0 deletions
diff --git a/src/components/autosuggest/autosuggest.js b/src/components/autosuggest/autosuggest.js
new file mode 100644
index 00000000..d4efe912
--- /dev/null
+++ b/src/components/autosuggest/autosuggest.js
@@ -0,0 +1,52 @@
+const debounceMilliseconds = 500
+
+export default {
+ props: {
+ query: { // function to query results and return a promise
+ type: Function,
+ required: true
+ },
+ filter: { // function to filter results in real time
+ type: Function
+ },
+ placeholder: {
+ type: String,
+ default: 'Search...'
+ }
+ },
+ data () {
+ return {
+ term: '',
+ timeout: null,
+ results: [],
+ resultsVisible: false
+ }
+ },
+ computed: {
+ filtered () {
+ return this.filter ? this.filter(this.results) : this.results
+ }
+ },
+ watch: {
+ term (val) {
+ this.fetchResults(val)
+ }
+ },
+ methods: {
+ fetchResults (term) {
+ clearTimeout(this.timeout)
+ this.timeout = setTimeout(() => {
+ this.results = []
+ if (term) {
+ this.query(term).then((results) => { this.results = results })
+ }
+ }, debounceMilliseconds)
+ },
+ onInputClick () {
+ this.resultsVisible = true
+ },
+ onClickOutside () {
+ this.resultsVisible = false
+ }
+ }
+}