pespantelis / vue-typeahead

:mag: Typeahead component for Vue.js
http://pespantelis.github.io/vue-typeahead
MIT License
517 stars 98 forks source link

Add delay function #49

Closed mizuka-wu closed 7 years ago

mizuka-wu commented 7 years ago

change some attribute that: data:{ delayTime:500, // 延迟输入 lastTime:0 } methods:{ update (event) { this.lastTime = event.timeStamp if (!this.query) { return this.reset() }

  if (this.minChars && this.query.length < this.minChars) {
    return
  }

  // 添加的延时
  setTimeout(() => {
    if (this.lastTime - event.timeStamp == 0){
      this.loading = true

      this.fetch().then((response) => {
        if (this.query) {
          let data = response.body.data['docs']?response.body.data['docs']:[]
          this.counter = response.body.data.numFound?response.body.data.numFound:{}
          // data = this.prepareResponseData ? this.prepareResponseData(data) : data
          this.items = this.render(this.limit ? data.slice(0, this.limit) : data)

          this.current = -1
          this.loading = false

          if (this.selectFirst) {
            this.down()
          }
        }
      })
    }
  },this.delayTime)
},

}

and make update to update($event)

pespantelis commented 7 years ago

You could use the debounce package for this. Please check the #45 issue.