Поиск через API в Vuetify autocomplete search идет очень медленно

Поиск через API в Vuetify autocomplete search идет очень медленно

09.03.2020 12:42:06 Просмотров 23 Источник

Я использую компонент автозаполнения Vuetify для поиска по всем биржевым символам и названиям компаний (всего 117230). Когда я ввожу поисковый запрос, браузер становится очень медленным на несколько секунд. Когда я попробовал его с несколькими записями (6000), никаких проблем не было. На данный момент API размещен локально.

Я предполагаю, что эта работа должна быть выполнена бэкендом? Но я не знаю, как это сделать. Какие у меня есть варианты?

Код Javascript в компоненте поиска:

import Chart from './GChart.vue'
export default {
  name: "Search",
  components: {
    Chart,
  },
  data: () => ({
    symbolsExchangesNames: [],
    isLoading: false,
    model: null,
    search: null
  }),

  computed: {
    items () {
      return this.symbolsExchangesNames
    }
  },

  watch: {
    search (val) {
      console.log(val)
      if (this.items.length > 0) return
      if (this.isLoading) return
      this.isLoading = true
      fetch('http://localhost/API/allSymbolsExchangesNames')
        .then(res => res.json())
        .then(res => {
          for(let i of res){
            this.symbolsExchangesNames.push({
              Code: i.Symbol,
              Exchange: i.Exchange,
              Name: i.Name,
              CodeAndName: `${i.Symbol} ${i.Name}`
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
        .finally(() => (this.isLoading = false))
    }
  }
}

Вот как выглядят эти данные:

[{"Symbol": "A", "Exchange": "US", "Name": "Agilent Technologies, Inc"}, {"Symbol": "AA", "Exchange": "US", "Name": "Alcoa Corporation"},...]
У вопроса есть решение - Посмотреть?

Ответы - Поиск через API в Vuetify autocomplete search идет очень медленно / Searching through API in Vuetify autocomplete search is very slow

Является ответом!
Evaldo Bratti

09.03.2020 03:55:17

117k записей занимает некоторое время, чтобы быть отрисованными в HTML.

Я бы предложил вам использовать некоторую функцию debounce (в приведенном ниже примере я использовал подчеркивание), чтобы запрашивать ваш бэкэнд только тогда, когда пользователь перестает печатать, или вы можете использовать какой-то реальный тип ввода, например, нажав enter во вводе или отправив форму.

И вы должны запретить бэкенду возвращать так много записей, так что да, вы должны фильтровать результаты в вашем бэкенде, это обычно используется строка запроса на GET-запросы для этого ( https://www.google.com/search?q=text%20to%20search)

new Vue({
  el: "#app",
  data() {
    return {
      query: "",
      data: []
    }
  },
  methods: {
    // with debounce, 300ms after user stops typing, the callback will be executed
    search: _.debounce(function() {
      // here you should query your backend, something like
      // http://localhost/API/allSymbolsExchangesNames?query=#{this.query}
      this.data = [1,2,3]
    }, 300)

  }
})
<script src="https://underscorejs.org/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="query" @keypress="search" />
  {{data}}
</div>

Закрыть X