在 VueJs 中使用上下键自动完成搜索 [英] Autocomplete search with key down and up in VueJs

问题描述

除了我的自动完成搜索之外，我想添加功能以允许使用 VueJs 的按键按下/按下功能

我的模板如下所示:

<h2>待办事项:</h2><div class="自动完成"><input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrowDown"/><ulv-for="(user, i) in filtersUsers":key="我"类=自动完成结果"v-show="isOpen":class="{ 'is-active': i === arrowCounter }"><li @click="setResult(user.text)">{{ user.text }}</li>

在脚本中，我有以下内容:

new Vue({el: "#app",数据: {用户: [{ id: 1, text: "Learn JavaScript", done: false },{ id: 2, text: "Learn", done: false },{ id: 3, text: "Play around in JSFiddle", done: true },{ id: 4, text: "Build something Awesome", done: true }],搜索: ''，箭头计数器: 0 ,isOpen: 假，过滤用户:[]},方法: {设置结果(文本){this.search = 文本},onArrowDown(事件){如果(this.arrowCounter < this.filteredUsers.length){this.arrowCounter++}},输入更改(){var 过滤 = this.users.filter((user) => {返回 user.text.match(this.search)});this.filteredUsers = []this.isOpen = 真this.filteredUsers.push(...过滤)控制台日志(this.filteredUsers)}}})

从用户点击输入字段的那一刻起，我如何才能让他使用向下键和向上键从列表中进行选择，并在我们使用向上/向下键时突出显示我们当前所在的列表?

我的完整小提琴是这里

解决方案

您可以对 @keydown.down 和 @keydown 使用相同的 onArrow 函数.up 设置文本如下:

<input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrow" @keydown.up="onArrow"/>

onArrow(event) {如果(this.filteredUsers.length > 0){this.arrowCounter = event.code == "ArrowDown" ?++this.arrowCounter : --this.arrowCounter;如果(this.arrowCounter >= this.filteredUsers.length)this.arrowCounter = (this.arrowCounter) % this.filteredUsers.length;否则如果(this.arrowCounter <0)this.arrowCounter = this.filteredUsers.length + this.arrowCounter;this.setResult(this.filteredUsers[this.arrowCounter].text);}},inputChanged(事件){if (event.code == "ArrowUp" || event.code == "ArrowDown")返回;this.filteredUsers = [];if (event.code == "Enter")返回;...}

.is-active {背景颜色:#dedede;}

new Vue({el: "#app",数据: {用户:[{编号:1，text: "学习 JavaScript",完成:假},{编号:2，文字:学习"，完成:假},{编号:3，文本:在 JSFiddle 中玩耍"，完成:真实},{编号:4，文字:建造一些很棒的东西"，完成:真实}],搜索: ''，箭头计数器:-1，isOpen: 假，过滤用户:[]},方法: {设置结果(文本){this.search = 文本},onArrow(事件){如果(this.filteredUsers.length > 0){this.arrowCounter = event.code == "ArrowDown" ?++this.arrowCounter : --this.arrowCounter;如果(this.arrowCounter >= this.filteredUsers.length)this.arrowCounter = (this.arrowCounter) % this.filteredUsers.length;否则如果(this.arrowCounter <0)this.arrowCounter = this.filteredUsers.length + this.arrowCounter;this.setResult(this.filteredUsers[this.arrowCounter].text);}},inputChanged(事件){if (event.code == "ArrowUp" || event.code == "ArrowDown")返回;this.filteredUsers = [];if (event.code == "Enter")返回;var 过滤 = this.users.filter((user) => {返回 user.text.match(this.search)});this.isOpen = 真this.filteredUsers.push(...过滤)控制台日志(this.filteredUsers)}}})

.autocomplete {位置:相对；}.自动完成结果{填充:0；边距:0；边框:1px 实心 #eeeeee;/* 高度:120px;*/溢出:自动；宽度:100%；}.自动完成结果{列表样式:无；文本对齐:左；填充:4px 2px；光标:指针；背景:红色；}.autocomplete-result.is-active,.自动完成结果:悬停{背景色:#4AAE9B；白颜色;}.活跃 {背景颜色:#dedede;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><h2>待办事项:</h2><div class="自动完成"><input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrow" @keydown.up="onArrow"/><ul v-for="(user, i) in filtersUsers" :key="i" class="autocomplete-results" v-show="isOpen" :class="{ 'is-active': i === 箭头计数器 }"><li @click="setResult(user.text)">{{ user.text }}</li>

In addition to my autocomplete search, I want to add functionality to allow key down/up functionality using VueJs

My template looks like this:

<div id="app">
  <h2>Todos:</h2>
  <div class="autocomplete">
    <input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrowDown"/>
     <ul
       v-for="(user, i) in filteredUsers" 
       :key="i"
       class="autocomplete-results" 
       v-show="isOpen"
       :class="{ 'is-active': i === arrowCounter }"
     >
       <li @click="setResult(user.text)">{{ user.text }}</li>
    </ul>
  </div>
</div>

In the scripts I have the following:

new Vue({
  el: "#app",
  data: {
    users: [
      { id: 1, text: "Learn JavaScript", done: false },
      { id: 2, text: "Learn", done: false },
      { id: 3, text: "Play around in JSFiddle", done: true },
      { id: 4, text: "Build something awesome", done: true }
    ],
    search: '',
    arrowCounter: 0 ,
    isOpen: false,
    filteredUsers: []
  },
  methods: {
    setResult(text) {
        this.search = text
    },
    onArrowDown(event){
      if (this.arrowCounter < this.filteredUsers.length) {
        this.arrowCounter++
      } 
    },
    inputChanged(){
      var filtered = this.users.filter((user) => {
        return user.text.match(this.search)
      });
      this.filteredUsers = [] 
      this.isOpen = true
      this.filteredUsers.push(...filtered)
      console.log(this.filteredUsers)
    }
  }
})

From the moment the user hits on the input field, how can I also allow him to use key down and up to choose from the list and highlight the list that we are currently on as we use the key up/down?

My full fiddle is here

解决方案

You could use the same onArrow function for both @keydown.down and @keydown.up to set the text as follows:

<input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrow" @keydown.up="onArrow" />

onArrow(event) {
  if (this.filteredUsers.length > 0) {
    this.arrowCounter = event.code == "ArrowDown" ? ++this.arrowCounter : --this.arrowCounter;
    if (this.arrowCounter >= this.filteredUsers.length)
      this.arrowCounter = (this.arrowCounter) % this.filteredUsers.length;
    else if (this.arrowCounter < 0)
      this.arrowCounter = this.filteredUsers.length + this.arrowCounter;
    this.setResult(this.filteredUsers[this.arrowCounter].text);
  }
},
inputChanged(event) {
  if (event.code == "ArrowUp" || event.code == "ArrowDown")
    return;
  this.filteredUsers = [];

  if (event.code == "Enter")
    return;
  ...
}

.is-active {
  background-color: #dedede;
}

new Vue({
  el: "#app",
  data: {
    users: [{
        id: 1,
        text: "Learn JavaScript",
        done: false
      },
      {
        id: 2,
        text: "Learn",
        done: false
      },
      {
        id: 3,
        text: "Play around in JSFiddle",
        done: true
      },
      {
        id: 4,
        text: "Build something awesome",
        done: true
      }
    ],
    search: '',
    arrowCounter: -1,
    isOpen: false,
    filteredUsers: []
  },
  methods: {
    setResult(text) {
      this.search = text
    },

    onArrow(event) {
      if (this.filteredUsers.length > 0) {
        this.arrowCounter = event.code == "ArrowDown" ? ++this.arrowCounter : --this.arrowCounter;
        if (this.arrowCounter >= this.filteredUsers.length)
          this.arrowCounter = (this.arrowCounter) % this.filteredUsers.length;
        else if (this.arrowCounter < 0)
          this.arrowCounter = this.filteredUsers.length + this.arrowCounter;
        this.setResult(this.filteredUsers[this.arrowCounter].text);
      }
    },
    inputChanged(event) {
      if (event.code == "ArrowUp" || event.code == "ArrowDown")
        return;

      this.filteredUsers = [];

      if (event.code == "Enter")
        return;

      var filtered = this.users.filter((user) => {
        return user.text.match(this.search)
      });

      this.isOpen = true
      this.filteredUsers.push(...filtered)


      console.log(this.filteredUsers)
    }
  }
})

.autocomplete {
  position: relative;
}

.autocomplete-results {
  padding: 0;
  margin: 0;
  border: 1px solid #eeeeee;
  /* height: 120px; */
  overflow: auto;
  width: 100%;
}

.autocomplete-result {
  list-style: none;
  text-align: left;
  padding: 4px 2px;
  cursor: pointer;
  background: red;
}

.autocomplete-result.is-active,
.autocomplete-result:hover {
  background-color: #4AAE9B;
  color: white;
}

.is-active {
  background-color: #dedede;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <div class="autocomplete">
    <input type="text" v-model="search" @keyup="inputChanged" @keydown.down="onArrow" @keydown.up="onArrow" />
    <ul v-for="(user, i) in filteredUsers" :key="i" class="autocomplete-results" v-show="isOpen" :class="{ 'is-active': i === arrowCounter }">
      <li @click="setResult(user.text)">{{ user.text }}</li>
    </ul>
  </div>
</div>

这篇关于在 VueJs 中使用上下键自动完成搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！