Is there a way to update the selected data of a multiselect?

[corsacca]

I have a multiselect typeahead with items already selected. Based on an outside event i'd like to add to or remove an item from the selected item list.
Or can i pass in a new array of items and call a refresh function?
Is this possible?
Thanks!

[running-coder]

hey @corsacca it was possible before but in a non-friendly way. I've added support for this you can check the hockey_v2 updated demo on the develop branch

$.typeahead({
  input: ".js-typeahead",
  ...
});

// Add an item
Typeahead[".js-typeahead"].addMultiselectItemLayout({object})
// Remove an item
Typeahead[".js-typeahead"].cancelMultiselectItem(index); // index corresponding to Typeahead[".js-typeahead"].items

[corsacca]

Thanks @running-coder, both functions work perfectly!

[tombertrand]

Amazing!

[mchupp]

@running-coder thanks for this. I have a follow up question. Could I use this to pre-populate the form field from another input field?
I have added a parallel hidden input field to each multiselect field in order to handle the selections as a native form would on form submission:

The issue is populating the initial "q" field when the page loads with the proper formatting and without having to code in the initial values into the js (as they would obviously change).

So is there a way I could use the addMultiselectItemLayout with my configuration to make this simple?

[tombertrand]

hey @mchupp you can either use the data function of multiselect to get your data async or you can use options.callback.onReady to read from your hidden input and parse / populate the values in your Typeahead.

Note that the object you are inserting NEEDS to match your object format. Else you can set a custom "matchOn" so the selected items doesn't appear in the search results

$.typeahead({
    input: '.js-typeahead-hockey_v2',
    ...
    multiselect: {
        ...
        data: function () {
            var deferred = $.Deferred();
 
            // Get data from Ajax, read from hidden input, etc.
            deferred.resolve([{object}, {object}, {object}]);
 
            return deferred;
        }
    },
    ...
    callback: {
        onReady: function (node) {
            // Get data from Ajax, read from hidden input, etc.

            this.addMultiselectItemLayout({object})
        }
    }
});

[mchupp]

@tombertrand Okay. I think I found an issue with using addMultiselectItem in this way. When you pass in the object two things aren't happening correctly.

1. The tag in the multiselect field doesn't display correctly. It displays Object [object] and that is because an object is passed into the function and the text in the code below is set to this object instead of something like: templateValue.name

` addMultiselectItemLayout: function (templateValue) {
var scope = this,
htmlTag = this.options.multiselect.href ? "a" : "span";

        var label = $("<span/>", {
            class: this.options.selector.label,
            html: $("<" + htmlTag + "/>", {
                text: templateValue,`

2. The item still remains in the list. There is no "matchon" work being done here. You mentioned writing a custom matchon function but I am not sure what that would look like. It isn't bad tracing back through the code to find some things but I am not sure I have my head wrapped around how the matchon works to remove selection options.

Thanks for this code, I always hate not mentioning how valuable the person's work is.

[mchupp]

@running-coder Okay, I think I found it. Actually the issue was passing the entire object into addMultiselectItemLayout.

If I replaced this:

//Typeahead["#qinput"].addMultiselectItemInitial(value);
with:
Typeahead["#qinput"].addMultiselectItemLayout(value.name);

Then it matched everything A-OK. I should mention that "name" happened to be one of my object fields and it is used in my matchon. Just thought I would follow up to let you know. Let me know if you are at all interested in my script and HTML.