packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue - master - githubmirror/vuetify

packages/docs/src/examples/v-autocomplete/misc-asynchronous-items.vue
214 строк4 KB
J-Sek
docs(VAutocomplete): restore async example
11 ноя 2025, 13:29
11 ноя 2025, 13:29cec13c3
<template>
  <v-toolbar color="teal">
    <v-toolbar-title>State selection</v-toolbar-title>

    <v-autocomplete
      v-model="select"
      v-model:search="search"
      :items="items"
      :loading="loading"
      autocomplete="off"
      class="mx-4"
      density="comfortable"
      label="What state are you from?"
      placeholder="Start typing..."
      style="max-width: 300px"
      hide-details
      hide-no-data
    ></v-autocomplete>

    <v-btn icon="mdi-dots-vertical"></v-btn>
  </v-toolbar>
</template>

<script setup>
  import { ref, watch } from 'vue'

  const states = [
    'Alabama',
    'Alaska',
    'American Samoa',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'District of Columbia',
    'Federated States of Micronesia',
    'Florida',
    'Georgia',
    'Guam',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Marshall Islands',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Carolina',
    'North Dakota',
    'Northern Mariana Islands',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Palau',
    'Pennsylvania',
    'Puerto Rico',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virgin Island',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming',
  ]

  const loading = ref(false)
  const items = ref([])
  const search = ref(null)
  const select = ref(null)

  // recommended to use debounce here
  watch(search, val => {
    if (!val) {
      setTimeout(() => items.value = [], 300)
    } else {
      val !== select.value && querySelections(val)
    }
  })

  function querySelections (v) {
    loading.value = true
    setTimeout(() => {
      if (v !== search.value) {
        return // drop responce, avoid race condition
      }
      items.value = states.filter(e => {
        return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
      })
      loading.value = false
    }, 500)
  }
</script>

<script>
  export default {
    data () {
      return {
        loading: false,
        items: [],
        search: null,
        select: null,
        states: [
          'Alabama',
          'Alaska',
          'American Samoa',
          'Arizona',
          'Arkansas',
          'California',
          'Colorado',
          'Connecticut',
          'Delaware',
          'District of Columbia',
          'Federated States of Micronesia',
          'Florida',
          'Georgia',
          'Guam',
          'Hawaii',
          'Idaho',
          'Illinois',
          'Indiana',
          'Iowa',
          'Kansas',
          'Kentucky',
          'Louisiana',
          'Maine',
          'Marshall Islands',
          'Maryland',
          'Massachusetts',
          'Michigan',
          'Minnesota',
          'Mississippi',
          'Missouri',
          'Montana',
          'Nebraska',
          'Nevada',
          'New Hampshire',
          'New Jersey',
          'New Mexico',
          'New York',
          'North Carolina',
          'North Dakota',
          'Northern Mariana Islands',
          'Ohio',
          'Oklahoma',
          'Oregon',
          'Palau',
          'Pennsylvania',
          'Puerto Rico',
          'Rhode Island',
          'South Carolina',
          'South Dakota',
          'Tennessee',
          'Texas',
          'Utah',
          'Vermont',
          'Virgin Island',
          'Virginia',
          'Washington',
          'West Virginia',
          'Wisconsin',
          'Wyoming',
        ],
      }
    },
    watch: {
      // recommended to use debounce here
      search (val) {
        if (!val) {
          setTimeout(() => this.items = [], 300)
        } else {
          val !== this.select && querySelections(val)
        }
      },
    },
    methods: {
      querySelections (v) {
        this.loading = true
        // Simulated ajax query
        setTimeout(() => {
          if (v !== this.search) {
            return // drop responce, avoid race condition
          }
          this.items = this.states.filter(e => {
            return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
          })
          this.loading = false
        }, 500)
      },
    },
  }
</script>