vue-autocomplete-input-tag

With this library you can search items in an array and select the desired value through an input. This library works with vue 3. If you use vue 2, you can use my another library exclusive to this version:: https://www.npmjs.com/package/vue2-autocomplete-input-tag

npm install vue-autocomplete-input-tag

Usage

<template>
  <div>
     <autocomplete 
        v-model="test"
        :items="items"
     />
  </div>
</template>

<script>
  import autocomplete from 'vue-autocomplete-input-tag'
  export default {
    name: "App",
    components: {
      autocomplete,
    },
    data() {
      return {
        test: "",
        items: [
          "Banana",
          "Strawberry",
          "Orange",
          "Lemon",
          "Pineapple",
          "Watermelon",
          "Melon",
        ],
      };
    },
  };
</script>

Attrs

You can pass attributes to input, like disabled and class

<template>
  <div>
     <autocomplete 
        v-model="test" 
        :items="items" 
        disabled
        class="my-custom-class"
     />
  </div>
</template>

Props

<template>
  <div>
     <autocomplete 
        v-model="test" 
        :items="items" 
        permitArbitraryValues
        :returned="['id', 'name']" 
        displayed="name"
     />
  </div>
</template>
<script>
  import autocomplete from 'vue-autocomplete-input-tag'
  
  export default {
    components: {
      autocomplete,
    },
    data() {
      return {
        test: {},
        items: [
          { name: "Banana", id: 1, color: "Yellow" },
          { name: "Strawberry", id: 2, color: "Red" },
          { name: "Orange", id: 3, color: "Orange" },
          { name: "Lemon", id: 4, color: "Green" },
          { name: "Pineapple", id: 5, color: "Yellow" },
          { name: "Watermelon", id: 6, color: "Red" },
          { name: "Melon", id: 7, color: "Yellow" },
        ],
      }
     }
</script>

How can I style my autocomplete?

The input can be styled like a single input. To style the results you can use .vue-autocomplete-input-tag-items and .vue-autocomplete-input-tag-item classes.

A single example:

  input {
    width: 100%;
    border: 1px solid #ccc;
    color: #666;
    border-radius: 10px;
    outline: none;
    padding: 9px 14px;
    box-sizing: border-box;
    font-size: 14px;
  }
  .vue-autocomplete-input-tag-items {
    border: 1px solid #ccc;
    max-height: 200px;
    margin-top: 8px;
    width: 100%;
    background-color: white;
    border-radius: 8px;
    overflow: auto;
  }
  .vue-autocomplete-input-tag-item {
    padding: 6px 16px;
    color: #4a4a4a;
    max-width: 100%;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
  }
  .vue-autocomplete-input-tag-item:hover {
    background-color: #e8e8e8;
  }

How does the reactivity works?

If you pass an array of strings (first example) the return will be just a string with the typed value, and when you select some option will be the selected value.

If you pass an array of objects (second example), when you type, the returned value will be an object with "typed" property. And when you select some option, will return what you inform in "returned" prop. The typed property is returned because you can use @input and refresh the array.

References

"Como criar e publicar uma biblioteca (em Vue) no npm?" -> https://medium.com/tableless/como-criar-e-publicar-uma-biblioteca-em-vue-no-npm-2dff8271ca7d