在 BootstrapVue 自动完成中识别数据列表选择与文本输入

Question

有以下示例代码，我想知道正确的event/method来区分输入中填写的值是手动输入的还是从<datalist>中选择的。

模板：

<div>
    <b-form-input list="my-list-id"
        v-on:change="handleChange" v-model="sizeSel"/>
    <datalist id="my-list-id">
        <option v-for="size in sizes">{{ size }}</option>
    </datalist>
</div>

JAVASCRIPT:

{
  data() {
    return {
      sizeSel: '',
      sizes: ['Small', 'Medium', 'Large', 'Extra Large']
    }
  },
  watch: {    
  },
  methods: {
    handleChange() {
      alert(this.sizeSel);
    }
  }
}

Answer 1

使用`keydown`

<datalist> 没有自己的活动，但无论如何都可以做到。

键盘事件和 <datalist> 点击都会触发输入的 keydown 侦听器，但只有键盘事件具有 key 属性。因此，如果 keydown 在没有 key 属性的情况下被触发，您就知道这是来自列表的点击：

试试这个：

new Vue({
  el: "#app",
  data() {
    return {
      sizes: ['Small', 'Medium', 'Large', 'Extra Large'],
      sizeSel: '',
      sizeChangedBy: null
    }
  },
  methods: {
    onkeydown(e) {
      const eventSource = e.key ? 'input' : 'list';
      this.sizeChangedBy = eventSource;
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    Event source: {{ sizeChangedBy }}<br />
    <label for="myInput">Choose one:</label>
    <input list="sizes" id="myInput" name="myInput" v-model="sizeSel" @keydown="onkeydown($event)" />
    <datalist id="sizes">
      <option v-for="size in sizes" :key="size" :value="size"></option>
    </datalist>
  </div>
</div>

在 BootstrapVue 自动完成中识别数据列表选择与文本输入

Recognize datalist selection vs. text input in BootstrapVue Autocomplete

html

javascript

vue.js

vuejs2

bootstrap-vue

使用`keydown`

在 BootstrapVue 自动完成中识别数据列表选择与文本输入

Recognize datalist selection vs. text input in BootstrapVue Autocomplete

html

javascript

vue.js

vuejs2

bootstrap-vue

使用keydown

使用`keydown`