Vuetify autocomplete组件

最新推荐文章于 2025-06-11 14:59:15 发布

原创最新推荐文章于 2025-06-11 14:59:15 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vuetify

Vuetify 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Vuetify的autocomplete组件，重点讲解了search-input.sync监听数据变化、update:search-input阻止默认事件以及keyup.enter键盘enter事件的用法，并提供了相关的Html、data、watch和methods部分的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、search-input.sync：在watch里面监听输入数据的变化进行查询操作。
2、update:search-input：用来阻止search-input.sync监听事件继续进行。
3、keyup.enter：键盘enter事件。

Html

<v-autocomplete
          class="selectBox"
          v-model="typeContent"
          item-text="allContent"
          item-value="fullname"
          :items="components"
          :loading="isLoading"
          :search-input.sync="changeInfo"
          @update:search-input="changeName"
          @keyup.enter="jumpPage"
          placeholder="e.g. benzene  salbutamol"
          no-data-text="no data"
          solo
          chips
          clearable
          hide-details
          hide-selected
      >
        <template v-slot:selection="{ attr, on, item, selected }">
            <span v-text="item.fullname"></span>
        </template>
        <template v-slot:item="data">
          <template>
            <v-list-item-content>
              <v-list-item-title> {{data.item.fullname}}<span style="color:#9e9e9e;">（Dimension:{{data.item.label_length}}）</span></v-list-item-title>
              <v-list-item-subtitle v-html="data.item.sy"></v-list-item-subtitle>
            </v-list-item-content>
          </template>
        </template>
        <template v-slot:append-outer>
          <v-slide-x-reverse-transition
              mode="out-in"
          >
            <span style="padding-left: 10px;margin-top: -4px;cursor: pointer" @click="jumpPage">
              <v-icon large color="#fff">search</v-icon>
            </span>
          </v-slide-x-reverse-transition>
        </template>
    </v-autocomplete>

data

	typeContent:'',
    components: [],
    isLoading:false,
    changeInfo:null,
    isUpdating:false,
    updataChanggeInfo:null,

watch

changeInfo(val){
        if (this.updataChanggeInfo === null) return;
        this.isLoading = true;
        fetch(`http://database.bio-it.cn/full_name_search?where={"$text":{"$search":"${val}"}}`)
          .then(res => res.json())
          .then(res => {
            const {_items } = res;
            this.components = _items
            this.components.forEach(item=>{
              item['allContent'] = item.fullname + item.sy;
            })
          })
          .catch(err => {
            console.log(err)
          })
          .finally(() => (this.isLoading = false))
      },

methods

changeName(val){
   this.updataChanggeInfo = val;
},

博客园地址：https://www.cnblogs.com/Li–gm/p/12767378.html