vue实现自定义的带历史记录的搜索框

控件UI

包含一个select，可选择某一类型，一个输入框、一个button 以及一个历史记录面板组成。

<template>
  <div class="custom-search">
    <!-- 搜索输入框 -->
    <div class="search-input-wrapper">
      <el-row>
        <el-col :span="20">
          <el-input placeholder="请输入内容"  v-model="searchQuery" class="input-with-select">
            <el-select v-model="value" slot="prepend" placeholder="请选择" >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-input>
        </el-col>
        <el-col :span="4"  class="search-btn">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 历史记录面板 -->
    <transition name="fade">
      <div v-if="showHistory && searchHistory.length > 0" class="history-panel">
        <div class="history-header">
          <span>搜索历史</span>
          <button @click="clearHistory">清空历史</button>
        </div>
        <ul>
          <li
            v-for="(item, index) in searchHistory"
            :key="index"
            @click="selectHistory(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<style scoped>
.custom-search {
  position: relative;
  /*width: 800px;*/
  font-family: Arial, sans-serif;
}

.search-input-wrapper {
  border-radius: 5px;
  overflow: hidden;
  height: 40px;
  padding: 2px 2px 2px 2px;
  background-color: #2E8B57;
}

.input-with-select .el-select {
  width: 105px;
  background-color: #ffffff;
}

.search-input-wrapper .el-button {
  color: #ffffff;
  height: 40px;
}

.search-input-wrapper button {
  background: none;
  border: none;
  padding: 0 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.search-input-wrapper button:hover {
  opacity: 0.8;
}

/* 历史记录面板 */
.history-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 5px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
}

.history-header {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  /*border-bottom: 1px solid #f0f0f0;*/
  font-size: 13px;
  color: #666;
}

.history-header button {
  background: none;
  border: none;
  color: #ff4d4f; /* 主绿色 */
  cursor: pointer;
  font-size: 13px;
}

.history-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-panel li {
  padding: 8px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-panel li:hover {
  background-color: #f0f5ea; /* 悬停背景色 */
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>

数据说明

  searchQuery :'',  // 搜索输入
  showHistory : false, //是否展示历史记录
  searchHistory : [], //历史记录数组

1. 搜索功能：

支持输入内容后按回车或点击搜索按钮进行搜索；
搜索内容会保存到历史记录中

handleSearch () {
  console.log("handleSearch")
  if (this.searchQuery === '') return
  // 添加到历史记录
  this.addToHistory(this.searchQuery)
  // 触发搜索事件
  this.$emit('search', this.searchQuery)
  this.showHistory = false
  console.log('执行搜索:', this.searchQuery) // 替换为实际搜索逻辑
},
addToHistory (query) {
  console.log("handleSearch", query)
  // 去重
  const index = this.searchHistory.indexOf(query)
  if (index >= 0) {
    this.searchHistory.splice(index, 1)
  }
  // 添加到开头
  this.searchHistory.unshift(query)
  // 限制历史记录数量
  if (this.searchHistory.length > 10) {
    this.searchHistory.pop()
  }
}

2. 历史记录管理

自动保存搜索历史到localStorage;
点击历史记录可以快速搜索;
支持删除单个历史记录或清空全部历史;
限制历史记录数量(最多10条);
在本地缓存的key=‘searchHistory’, value为json格式;

	clearHistory() {
     this.searchHistory = []
    },
    selectHistory (item) {
      this.searchQuery = item
      this.handleSearch()
    },
    // 监听数据变化
  watch: {
    /// 同步本地缓存和UI
    searchHistory (newVal, oldVal) {
      localStorage.setItem('searchHistory', JSON.stringify(newVal))
    }
    },
    // 挂载后读取本地缓存的历史记录
    mounted() {
	    const savedHistory = localStorage.getItem('searchHistory')
	    if (savedHistory) {
	      this.searchHistory = JSON.parse(savedHistory)
	    }
	  }

3. 用户体验优化

输入框聚焦时显示历史记录；
美观的下拉样式和交互效果；

<el-input placeholder="请输入内容"
                v-model="searchQuery"
                class="input-with-select"
                @focus="showHistory = true"
                @blur="handleBlur"
                @keyup.enter="handleSearch"
 >
// js部分
handleBlur() {
  // 使用setTimeout确保点击历史项能先执行
  this.blurTimer = setTimeout(() => {
    this.showHistory = false
  }, 200)
}
beforeDestroy() {
	clearTimeout(this.blurTimer)
 }