vue2中el-input输入框加上记忆搜索

### 实现 `el-input` 组件的记忆搜索功能

为了在 Vue2 项目中为 Element UI 的 `el-input` 输入框添加记忆搜索功能，可以按照如下方式构建：

#### 安装依赖库
确保已经安装了必要的包，比如 Element UI 和 Axios（用于模拟数据请求）。如果尚未安装这些包，则可以通过 npm 或 yarn 安装。

npm install element-ui axios --save

或者使用 Yarn:

yarn add element-ui axios

#### 创建记忆存储机制
创建一个简单的本地状态管理器来保存历史记录。这可以在 Vuex store 中完成，也可以简单地通过组件内的 data 属性处理。这里展示一种不涉及复杂状态管理模式的方法，在组件内部维护历史列表。

#### 编写模板部分
定义带有自动补全特性的输入框结构。此例子基于提供的布局和视图配置[^1][^2]，并扩展其功能以支持记忆搜索特性。

<template>
  <div class="search-container">
    <!-- 记忆搜索 -->
    <el-autocomplete
      v-model="input"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入课程名称"
      @select="handleSelect"
      prefix-icon="el-icon-search"
      clearable>
    </el-autocomplete>

    <!-- 显示表单或其他内容区域... -->
  </div>
</template>

#### JavaScript 部分
接下来编写相应的脚本逻辑，包括初始化变量、获取建议以及选择项事件处理器等操作。

<script>
export default {
  name: 'CourseSearch',
  
  data() {
    return {
      input: '',
      historyList: [], // 存储之前搜索过的关键词
    };
  },

  methods: {
    querySearchAsync(queryString, cb) {
      let results;
      
      if (queryString !== '') {
        // 如果有新的查询字符串则过滤已有历史记录匹配的结果
        results = this.historyList.filter(item => item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        
        // 模拟异步加载更多可能的选项（实际应用应替换为此处）
        setTimeout(() => {
          cb(results.length ? results : [{ value: queryString }]);
          
          // 将新条目加入到历史记录头部(去重)
          if (!this.historyList.some(hisItem => hisItem.value === queryString)) {
            this.historyList.unshift({value: queryString});
            
            // 控制最大长度
            while(this.historyList.length > 5){
              this.historyList.pop();
            }
          }
        }, 300); // 设置延迟时间以便更接近真实场景
        
      } else {
        // 当无输入时返回全部历史记录作为提示
        results = this.historyList.slice(0, 5);
        cb(results);
      }
    },
    
    handleSelect(item) {
      console.log(`选择了 ${item.value}`);
      // 可在此执行进一步的动作，如发起 API 请求等...
    }
  }
};
</script>

上述代码实现了基本的记忆搜索功能，其中包含了对用户输入的历史记录管理和实时筛选。每当用户开始键入字符时，都会触发 `querySearchAsync()` 方法，并根据当前输入动态更新下拉菜单中的推荐列表；当用户从列表中选取某一项后会调用 `handleSelect()` 函数做相应处理。