如何在bootstrap-vue中将文本输入框用作下拉按钮实现搜索筛选功能

问题原因 #

b-dropdown组件默认将触发按钮区域的交互行为收归自身控制，用于点击切换下拉菜单的展开/收起状态，放在button-content插槽内的输入框会被组件默认拦截输入事件，导致无法正常编辑。

解决方案 #

推荐直接使用BootstrapVue原生支持筛选功能的表单选择组件，无需额外改造：

方案1：使用自带筛选功能 #

直接开启filter属性即可实现输入筛选下拉选项的需求，完整示例代码如下：

JS代码

var app = new Vue({
  el: '#app',
  data() {
    return {
      selected: '',
      options: [
        { text: 'First Action', value: 'first' },
        { text: 'Second Action', value: 'second' },
        { text: 'Third Action', value: 'third' },
        { text: 'Active action', value: 'active' },
        { text: 'Disabled action', value: 'disabled', disabled: true }
      ]
    }
  }
})

HTML代码

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-form-group
    label="选择项:"
    label-for="select-input"
    description="输入内容可筛选下拉选项"
  >
    <b-form-select
      id="select-input"
      v-model="selected"
      :options="options"
      filter
      placeholder="输入关键词筛选"
      required
    ></b-form-select>
  </b-form-group>
</div>

方案2：强制改造原有b-dropdown实现 #

如果必须沿用b-dropdown结构，可通过阻止事件冒泡+关闭默认触发规则实现输入功能，修改点如下：

1. 给b-dropdown添加toggle-on-click="false"属性，关闭点击触发区域自动切换下拉的默认行为
2. 给b-form-input添加@click.native.stop属性，阻止输入框点击事件冒泡到下拉组件
3. 手动控制下拉菜单的展开/收起状态，可通过监听输入框focus事件触发展开

修改后的核心代码片段：

<b-dropdown id="dropdown-1" v-model="showDropdown" toggle-on-click="false" class="m-md-2">
  <template #button-content>
    <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
        description="We'll never share your email with anyone else."
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          placeholder="Enter email"
          required
          @focus="showDropdown = true"
          @click.native.stop
        ></b-form-input>
      </b-form-group>
  </template>
  <!-- 下拉选项内容 -->
</b-dropdown>

对应data里新增showDropdown: false控制变量即可。

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