vue2 实现类似百度一下，支持可输入模糊查询，也支持输入时下拉选择，回车查询

本文链接：https://blog.youkuaiyun.com/weixin_43845137/article/details/129762490

文章展示了如何在Vue2中创建一个类似于百度搜索的输入组件，该组件支持用户输入时的模糊查询，提供下拉选择选项，并在回车时执行查询操作。使用了el-autocomplete组件来实现这些功能，包括数据过滤、回车事件处理和清空输入等交互。

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

vue2 实现类似百度一下，支持可输入模糊查询，也支持输入时下拉选择，回车查询

AgentNameInput.vue

<template>
  <div class="AgentNameInput">
    <div class="label">
      代理名称：{{ stateInput }}
    </div>
    <div class="input-wrap">
      <!-- @change="enterQuerySearch2" @keyup.enter.native="enterQuerySearch"-->
      <el-autocomplete
        v-model="stateInput"
        class="inline-input"
        :fetch-suggestions="querySearch"
        :select-when-unmatched="true"
        :debounce="500"
        clearable
        placeholder="请输入内容"
        @select="handleSelect"
        @clear="setBlur()"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AgentNameInput',
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      restaurants: []
    }
  },
  computed: {
    matchingValue1() {
      return this.matchingValue
    },
    stateInput: {
      get() {
        return this.value
      },
      set(newV) {
        this.$emit('input', newV)
      }
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    querySearch(queryString, cb) {
    //   console.log('queryString', queryString)
      var restaurants = this.restaurants
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    // // 回车拿到的值 label的值
    // enterQuerySearch(event) {
    //   console.log('回车', event.target.value)
    // },
    // 下拉选择的值
    handleSelect(item) {
      console.log('handleSelect-item', item)
    },
    // enterQuerySearch2(event) {
    //   console.log('enterQuerySearch2', event)
    // },
    setBlur() {
      //  在点击由 clearable 属性生成的清空按钮时，主动触发失去焦点，解决‘fetch-suggestions’输入建议不提示的bug
      document.activeElement.blur()
    },
    loadAll() {
      return [
        { value: '1', address: '测试1' },
        { value: '2', address: '测试2' },
        { value: '3', address: '测试3' },
        { value: '4', address: '测试4' },
        { value: '11', address: '测试11' },
        { value: '12', address: '测试12' },
        { value: '13', address: '测试13' },
        { value: '14', address: '测试14' },
        { value: '111', address: '测试111' },
        { value: '122', address: '测试122' },
        { value: '123', address: '测试123' }
      ]
    },
    refreshData() {
      this.state = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.AgentNameInput {
  background: #fff;
  display: flex;
  height: 32px;
  line-height: 32px;

  .label {
    text-align: right;
    padding-right: 12px;
    width: 110px;
    font-size: 12px;
    color: #666;
  }

  .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(100% - 110px);
    margin-top: -1px;

    .input {
      width: 272px;
      height: 32px;
      border: 1px solid #ccc;
    }

    .select-wrap {
      position: absolute;
      top: 37px;
      left: 0;
      height: 210px;
      width: 272px;
      background: #fff;
      z-index: 1000;
      border: 1px solid #ccc;
      padding: 5px 8px;

      .li-item {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        background: #ccc;
        margin-bottom: 3px;
        cursor: pointer;
      }

      .active {
        color: red;
      }
    }
  }
}
</style>

父组件

    <div>form - {{ form }}</div>
    <AgentNameInput ref="AgentIdSelectInputRef" v-model="form.inputVal"></AgentNameInput>

      form: {
        inputVal: ''
      }

    reset() {
      // 重置
      this.form.inputVal = ''
    }