在 BootstrapVue 自動完成中識別數據列表選擇與文本輸入

Question

有了以下示例代碼，我想知道正確的事件/方法來區分輸入中填寫的值是手動輸入的還是從<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屬性。 因此，如果在沒有key屬性的情況下觸發了keydown ，則您知道這是從列表中單擊：

嘗試這個：

 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>