Vue Select — Custom Search and Positioning

Photo by vision webagency on Unsplash

To make dropdowns easier, we can use the Vue Select plugin to add the dropdown.

It can do much more than the select element.

In this article, we’ll look at how to use the vue-select package to make more complex dropdowns.

Customizing Keydown Behaviour

We can customize keydown behavior to do what we want.

For example, we can write:

<template>
  <div>
    <v-select no-drop taggable multiple :select-on-key-codes="[188, 13]"/>
  </div>
</template>
<script>
export default {
  data: () => ({})
};
</script>

to add the selections when we press the comma key in addition to the return key.

188 is the keycode for the comma key and 13 is the return key.

We can append what we want to the selection after a selection is made.

For example, we can write:

<template>
  <v-select taggable multiple no-drop :map-keydown="handlers" placeholder="enter an email"/>
</template>
<script>
export default {
  methods: {
    handlers: (map, vm) => ({
      ...map,
      50: e => {
        e.preventDefault();
        if (e.key === "@" && vm.search.length > 0) {
          vm.search =…