Vue js + Vuetify autocomplete, используя API Predictor Яндекса

Question

Я использую API автозаполнения Яндекса в моем приложении vue js. Здесь вы можете увидеть мой пример codepen . Автозаполнение работы, когда я ввожу одну работу, например, hell при получении ответа hello. Но когда я введу hello w автозаполнение, верните мне следующее возможное слово как world. Но как я могу удалить не полностью введенное последнее слово и добавить его sh для автозаполнения и показа пользователю? Также, как я могу отправить запрос, когда пользователь прекратит вход для исполнения?

Код:

<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]
    }

Функция снижения производительности, я бы рекомендовал Loda sh debounce для этого