Vue js + Vuetify 使用 Yandex Predictor API 自动完成

Question

我在我的 vue js 应用程序中使用 Yandex 自动完成词 API。在这里你可以看到我的codepen 示例。 当我输入一项工作时自动完成工作，例如hell 响应得到hello。但是当我输入hello w 时，自动完成功能将下一个可能的单词返回为world。但是如何删除未完全输入的最后一个单词并将其推送到自动完成项目并显示给用户？另外，当用户停止输入以获得性能时，我如何发送请求？

代码：

<v-autocomplete
    v-model="select"
    :loading="loading"
    :items="items"
    :search-input.sync="search"
    cache-items
    class="mx-4"
    flat
    hide-no-data
    hide-details
    label="Search..."
    solo-inverted
></v-autocomplete>

脚本：

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      loading: false,
      items: [],
      search: null,
      select: null,
      states: [

      ]
    };
  },
  watch: {
    search(val) {
      val && val !== this.select && this.querySelections(val);
    }
  },
  methods: {
    querySelections(v) {
      this.loading = true;
      var query = this.search.split(" ").join("+")
      console.log("Search query")
      console.log(query)
      var url ="https://predictor.yandex.net/api/v1/predict.json/complete?key=key&q="+query+"&lang=en"
      axios.get(url).then(res => {
        console.log("Next or current possible word")
        console.log(res.data.text[0])
        this.states = res.data.text
        this.items = this.states.filter(e => {
          return (e || "").toLowerCase()
            .indexOf((v || "")
            .toLowerCase()) > -1;
        });
        this.loading = false
      })
    }
  }
});

Answer 1

你真的需要两个不同的东西：

1. filter 适当的地方，你可以做你想做的事，在这种情况下，你删除拆分单词并获取你想要的部分。 比如：

:filter="customFilter"
...
customFilter(item, queryText, itemText) {
     queryText = queryText.split(' ')[1]
    }

1. 一个性能去抖动功能，我推荐Lodash debounce