Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Armani's avatar
Level 17

Add add item to choices js

I created this Vue component:

<script>
  import Choices from 'choices.js';

  export default {
    props: {options: [Array, Object], name: String, modelValue: [String, Number], disabled: Boolean, required: Boolean},
    emits: ['update:modelValue'],
    mounted() {
      this.choices = new Choices(this.$el, {allowHTML: true, removeItemButton: true, addItems: true}).setChoices(this.options, 'id', 'name', true);
    },
    watch: {
      modelValue(newValue, oldValue) {
        newValue ? this.choices.setChoiceByValue(newValue) : this.choices.removeActiveItemsByValue(oldValue);
      },
      disabled(newValue)
      {
        newValue ? this.choices.disable() : this.choices.enable();
      }
    }
  }
</script>
<template>
    <select class="form-control" @change="$emit('update:modelValue', $event.target.value)" :value="modelValue" :name="name" :id="name" :disabled="disabled" :required="required"></select>
</template>

and it works fine but I can not add capability to add item to option from search input. when I search something that not in options it says no results found. I even added addItems: true but still nothing happening.

0 likes
1 reply
Arcanefoam's avatar

Its now possible with Choices.js version 11. You need to use the 'addChoices' option.

1 like

Please or to participate in this conversation.