Vue.js搜索列表实现方向键导航及选中项高亮功能的相关问题

实现方案 #

1. JS逻辑修改

新增选中索引存储、键盘导航处理逻辑，调整搜索触发逻辑：

new Vue({
  el: '#app',
  data: {
    type: "sales_invoices",
    SearcListed: {
      searchText: '',
      listShow: false,
      searcList: [],
      activeIndex: -1 // 存储当前选中项索引，-1为无选中状态
    },
  },
  methods: {
    selecteds(list) {
      this.SearcListed.listShow = false;
      this.SearcListed.searchText = list.name;
      this.SearcListed.activeIndex = -1; // 选中后重置索引
    },
    async search(e) {
      // 搜索只响应非导航按键的输入
      const navKeys = [13,27,38,40]
      if(navKeys.includes(e.keyCode)) return
      
      this.SearcListed.activeIndex = -1 // 每次新搜索重置选中索引
      if (this.SearcListed.searchText !== '') {
        const res = await this.callApi('get', 'getir' + '?filter=' + this.SearcListed.searchText)
        if (res.status === 200) {
          this.SearcListed.searcList = res.data;
          this.SearcListed.listShow = res.data.length > 0;
        }
      } else {
        this.SearcListed.listShow = false;
      }
    },
    // 新增键盘导航处理
    handleKeydown(e) {
      if (!this.SearcListed.listShow || this.SearcListed.searcList.length === 0) return
      const listLen = this.SearcListed.searcList.length
      // 上下方向键：支持单独使用或配合alt键使用
      if ((e.keyCode === 38 || e.keyCode === 40)) {
        e.preventDefault()
        if (e.keyCode === 38) { // 上键
          this.SearcListed.activeIndex = this.SearcListed.activeIndex <= 0 ? listLen - 1 : this.SearcListed.activeIndex - 1
        } else { // 下键
          this.SearcListed.activeIndex = this.SearcListed.activeIndex >= listLen - 1 ? 0 : this.SearcListed.activeIndex + 1
        }
        // 选中项自动滚动到可视区域
        this.$nextTick(() => {
          document.querySelector('.select li a.active')?.scrollIntoView({ block: 'nearest' })
        })
      } else if (e.keyCode === 13) { // 回车触发选中
        e.preventDefault()
        if (this.SearcListed.activeIndex >= 0) {
          this.selecteds(this.SearcListed.searcList[this.SearcListed.activeIndex])
        }
      } else if (e.keyCode === 27) { // ESC关闭下拉列表
        this.SearcListed.listShow = false
        this.SearcListed.activeIndex = -1
      }
    }
  }
});

2. CSS新增高亮样式

在原有样式基础上新增选中项高亮规则：

/* 选中项高亮样式，可按需调整颜色 */
.select li a.active {
  color: #ffffff;
  background-color: #22c39e;
}

3. HTML模板修改

绑定键盘事件与选中状态类：

<div id="app">
  <div class="container">
    <div class="col-sm-6">
      <div class="input-group input-group-merge mb-1">
        <!-- 新增keydown事件绑定 -->
        <input type="text" class="form-control" placeholder="Search..." aria-label="Search..." aria-describedby="basic-addon-search2" v-model.trim="SearcListed.searchText" @keyup="search" @keydown="handleKeydown" autocomplete="off" />
        <span class="input-group-text">
          <i class="fas fa-search"></i>
        </span>
        <div class="select" v-if="SearcListed.listShow">
          <ul>
            <!-- 绑定active类判断 -->
            <li v-for="(list, index) in SearcListed.searcList" :key="list.id">
              <a :class="{active: index === SearcListed.activeIndex}" @mousedown.prevent @click="selecteds(list)">{{ list.name }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

内容的提问来源于stack exchange，提问作者lidersin