Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️
https://choices-js.github.io/Choices/
MIT License
6.05k stars 597 forks source link

Need more sample such as Add, Edit or delete item #1140

Open hyuuks opened 6 months ago

hyuuks commented 6 months ago

Hi, Choice.js is great library, but for some one like me (and many) if we dont see more samples, or related documentation its hard to use the library/component. Even for simple action that add, edit or delete Choice items "Dynamically" is really hard for me, for example :

<label for="choices-single-default">Default</label>
        <select
          class="form-control"
          data-trigger
          name="choices-single-default"
          id="choices-single-default"
          placeholder="This is a search placeholder"
        >
          <option value="">This is a placeholder</option>
          <option value="Choice 1">Choice 1</option>
          <option value="Choice 2">Choice 2</option>
          <option value="Choice 3">Choice 3</option>
        </select>

    <script>
        var genericExamples = new Choices(document.querySelector('[data-trigger]'), {
            placeholderValue: 'This is a placeholder set in the config',
            searchPlaceholderValue: 'This is a search placeholder',
            choices: [],
          });
    </script>

when im trying to delete an item, following "documentation" https://github.com/Choices-js/Choices#removeactiveitemsbyvaluevalue

genericExamples.removeActiveItemsByValue({choiceId: 2, groupId: -1, id: 8, label: "Choice 2", value: "Choice 2"});

i cant delete the item. i've tried

genericExamples.removeActiveItemsByValue(1);

//or trying following https://github.com/Choices-js/Choices/issues/634

choiceList.passedElement.triggerEvent('removeItem', ({id: 8, label: "Choice 2", value: "Choice 2"}))

but still none of the codes can delete the item.

Syfele commented 3 months ago

Same problem here to set dynamic value In my project, the form is hidden by default, selects are filled ... When user click edit button I must fill form with my object values Unfortunately, setChoiceByValue work with choice-js instance and I don't see how I can get it from my select

I create JSFiddle to explain more what I want to achive.

Workaround : back to select2 with jQuery :(