Select component with search (like Select2)

Is your feature request related to a problem? Please describe…

If the option list for <select> elements (i.e. <b-form-select :options="options" />) becomes long, users cannot easily find what they want to select. This is especially true if the option list is sorted by value, and not by label text (e.g. with localized labels, but that’s easy to overcome).

This is a shortcoming of the Browser’s UI capabilities, providing no search for <select> elements. Once opened, the user can start typing, and the option list is matched (but only with a prefix match). This only works reliably on desktop browsers.

There’s also a <datalist> element, which allows searching/matching, but last time I checked, it didn’t behave like a dropdown list and allowed entering custom values.

Describe the solution you’d like

I’d like to have either an option to <b-form-select>, or a separate component which implements something like Select2, Chosen or Vue Select:

An input field for the user to search options + a dropdown list with matching options.

If no match is found, a short message indicating this fact should displayed instead of the dropdown list. Allowing new values should not be possible (or at least be disabled by default).

Describe alternatives you’ve considered

• Typeahead, Select2, Chosen require jQuery
• Vue Select requires extra work to make it look like the rest of the application (no Bootstrap styling)
• Vue Selectize mostly does what I want, but brings redundant features (sth. similar to <b-form-tags>), thus increasing the bundle size; it also has no Bootstrap styling
• <datalist> allows entering new values, and needs custom styling (adding a class="form-control" might do the trick)
• <b-form-input> combined with <b-dropdown> this is my current approach. It requires a bit CSS hackery to properly position the dropdown list and a larger chunk of JS code to open/close/filter the list.

Additional context

Vue Selectize, Example “Single Item Select”

[arunavo4]

Adding some Starter Code for anyone willing to hack away. This works but the only difference is it uses HTML input and not b-form-input.

<template>
  <div class="dropdown" v-if="options">

    <!-- Dropdown Input -->
    <input class="dropdown-input"
      :name="name"
      @focus="showOptions()"
      @blur="exit()"
      @keyup="keyMonitor"
      v-model="searchFilter"
      :disabled="disabled"
      :placeholder="placeholder" />

    <!-- Dropdown Menu -->
    <div class="dropdown-content"
      v-show="optionsShown">
      <div
        class="dropdown-item"
        @mousedown="selectOption(option)"
        v-for="(option, index) in filteredOptions"
        :key="index">
          {{ option.name || option.id || '-' }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Dropdown',
    template: 'Dropdown',
    props: {
      name: {
        type: String,
        required: false,
        default: 'dropdown',
        note: 'Input name'
      },
      options: {
        type: Array,
        required: true,
        default: () => [],
        note: 'Options of dropdown. An array of options with id and name',
      },
      placeholder: {
        type: String,
        required: false,
        default: 'Please select an option',
        note: 'Placeholder of dropdown'
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false,
        note: 'Disable the dropdown'
      },
      maxItem: {
        type: Number,
        required: false,
        default: 6,
        note: 'Max items showing'
      }
    },
    data() {
      return {
        selected: {},
        optionsShown: false,
        searchFilter: ''
      }
    },
    created() {
      this.$emit('selected', this.selected);
    },
    computed: {
      filteredOptions() {
        const filtered = [];
        const regOption = new RegExp(this.searchFilter, 'ig');
        for (const option of this.options) {
          if (this.searchFilter.length < 1 || option.name.match(regOption)){
            if (filtered.length < this.maxItem) filtered.push(option);
          }
        }
        return filtered;
      }
    },
    methods: {
      selectOption(option) {
        this.selected = option;
        this.optionsShown = false;
        this.searchFilter = this.selected.name;
        this.$emit('selected', this.selected);
      },
      showOptions(){
        if (!this.disabled) {
          this.searchFilter = '';
          this.optionsShown = true;
        }
      },
      exit() {
        if (!this.selected.id) {
          this.selected = {};
          this.searchFilter = '';
        } else {
          this.searchFilter = this.selected.name;
        }
        this.$emit('selected', this.selected);
        this.optionsShown = false;
      },
      // Selecting when pressing Enter
      keyMonitor: function(event) {
        if (event.key === "Enter" && this.filteredOptions[0])
          this.selectOption(this.filteredOptions[0]);
      }
    },
    watch: {
      searchFilter() {
        if (this.filteredOptions.length === 0) {
          this.selected = {};
        } else {
          this.selected = this.filteredOptions[0];
        }
        this.$emit('filter', this.searchFilter);
      }
    }
  };
</script>


<style lang="scss" scoped>
  .dropdown {
    position: relative;
    display: block;
    margin: auto;
    .dropdown-input {
      background: #fff;
      cursor: pointer;
      border: 1px solid #e7ecf5;
      border-radius: 3px;
      color: #333;
      display: block;
      font-size: .8em;
      padding: 6px;
      min-width: 250px;
      max-width: 250px;
      &:hover {
        background: #f8f8fa;
      }
    }
    .dropdown-content {
      position: absolute;
      background-color: #fff;
      min-width: 248px;
      max-width: 248px;
      max-height: 248px;
      border: 1px solid #e7ecf5;
      box-shadow: 0px -8px 34px 0px rgba(0,0,0,0.05);
      overflow: auto;
      z-index: 1;
      .dropdown-item {
        color: black;
        font-size: .7em;
        line-height: 1em;
        padding: 8px;
        text-decoration: none;
        display: block;
        cursor: pointer;
        &:hover {
          background-color: #e7ecf5;
        }
      }
    }
    .dropdown:hover .dropdowncontent {
      display: block;
    }
  }
</style>

[dmke]

Addendum

I’ve found these issues (after creating this one, of course 🙄) which mention a search/filter functionality.

• #5367 promising this feature in a “near-future release” (May 2020)
• #5235 “in a month-ish” (April 2020)
• #3162 (probably outdated)

It looks like, this feature is on the way. Is there a way to beta-test it?