New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
corsacca opened this Issue Nov 22, 2017 · 7 comments

Comments

Projects
None yet
4 participants
@corsacca

corsacca commented Nov 22, 2017

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 added a commit that referenced this issue Nov 22, 2017

@running-coder

This comment has been minimized.

Owner

running-coder commented Nov 22, 2017

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

@running-coder running-coder added this to the 2.10.5 milestone Nov 22, 2017

@corsacca

This comment has been minimized.

corsacca commented Nov 28, 2017

Thanks @running-coder, both functions work perfectly!

@tombertrand

This comment has been minimized.

Collaborator

tombertrand commented Nov 28, 2017

Amazing!

@mchupp

This comment has been minimized.

mchupp commented Apr 13, 2018

@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

This comment has been minimized.

Collaborator

tombertrand commented Apr 16, 2018

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

This comment has been minimized.

mchupp commented May 10, 2018

@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,`
  1. 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

This comment has been minimized.

mchupp commented May 10, 2018

@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.

running-coder added a commit that referenced this issue Jul 19, 2018

Version 2.10.5
Features
- Feature #397 update data of a multiselect

Fixes
- Fix #389 Allow `onLayoutBuiltBefore` to return a custom template, wrap `<li>` inside other `<ul>` or `<div>`
- Fix #396 limitTemplate doesn't display unless emptyTemplate is defined
- Fix #408 Null values in query data causes a null value error.
- Fix #424 groupOrder array doesn't work when group is a string
- Fix #434 The item value in the onCancel function in undefined
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment