Vuetify autocomplete组件

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"
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-autocomplete是Element UI库中的一个组件,用于实现自动完成的功能。使用el-autocomplete组件可以在用户输入时,根据输入内容自动匹配并展示相关选项。 使用el-autocomplete组件的步骤如下: 1. 引入Element UI库和el-autocomplete组件: ```html <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 2. 在Vue实例中注册el-autocomplete组件: ```javascript Vue.use(ElementUI); ``` 3. 在Vue模板中使用el-autocomplete组件: ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入关键词" @select="handleSelect"> </el-autocomplete> ``` 4. 在Vue实例中定义相关方法: ```javascript new Vue({ data() { return { value: '', suggestions: ['apple', 'banana', 'orange'] }; }, methods: { querySearch(queryString, cb) { // 根据输入内容进行匹配,返回匹配的选项 const results = queryString ? this.suggestions.filter(item => item.toLowerCase().includes(queryString.toLowerCase())) : this.suggestions; // 调用回调函数,将匹配的选项传递给el-autocomplete组件 cb(results); }, handleSelect(item) { // 处理选中某个选项的逻辑 console.log(item); } } }).$mount('#app'); ``` 以上就是使用el-autocomplete组件的基本步骤。需要注意的是,fetch-suggestions属性用于指定一个方法,该方法在用户输入时被调用,用于获取匹配的选项。@select事件用于监听用户选中某个选项的事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值