Disable other groups, when select an item

Question

I search for a way to disable other groups in magicsuggest, when you select an item.

Example from the magicsuggest page (http://nicolasbize.com/magicsuggest/data.json): When I select an item from the group "United States", let's say "Chicago", it shall disable the elements from the other group "France" or even don't show them anymore.

Thanks in advance

score 0 · Answer 1 · answered May 25 '15 at 15:44

ok since this is now top result on google (for "magicsuggest disable group"), here is my solution:
I extended the API for the following lines in "magisuggest.js":
in the default list (line 22++) I added 2 variables:

safeArray: "",
removeInactiveGroups: false,

the first one is a variable where you store the original data
the second one fires the events when set on true

then you have to go to the function "_onComboItemSelected" and add a new line at the end:

handlers._disableUnusedGroups();

and right below i wrote the new function:

    _disableUnusedGroups: function(){
        if(cfg.removeInactiveGroups){
            var list_ = ms.getData();
            if(cfg.safeArray==""){
                cfg.safeArray=list_;
            }
            var test2 = JSON.stringify(ms.getSelection());
            test2 = test2.split(":");
            test2 = test2[test2.length-1];
            var res = test2.substr(1,test2.length-4);
            var testarray = [];
            $.each(list_, function(a,b){
            //WILDCARD = the name of the group, in the example above it would
            //be "country"
                if(b[WILDCARD]==res){ 
                    testarray.push(b);
                }
            });
            ms.setData(testarray);
        }
    },

it is important, that the name with the groups is the last value in your json object! (I didn't find another way to get the group name of the selected items than shown above)
this adds the handler for adding new items to the selected list
now you just have to extend the handler "_onTagTriggerClick" which fires when an element is removed for the following lines at the end:

if(ms.getSelection()["length"] == 0 && cfg.removeInactiveGroups){
    ms.setData(cfg.safeArray);
}

this will just restore the original list in the selection container

OK this adds now handlers to remove and add of items, now we have to extend the handler that fires at the start of the program (if values are set):
the handler starts with
"if(element !== null) {"
the function looks for me like this now:

if(element !== null) {
self._render(element);
if(cfg.value!==null){
    var check = cfg.value[0];
    var list_ = ms.getData();
    var searchItem;
    var newList_ = [];

    if(cfg.safeArray==""){cfg.safeArray=list_;}

    $.each(list_, function(a,b){
        //WILDCARD2 = the name of the elements, in the example above it
        //would be "name"
        if($.trim(b[WILDCARD2]) == check){
        //WILDCARD = the name of the group, in the example above it would
        //be "country"
            searchItem=b[WILDCARD];
        }
    });

    $.each(list_, function(a,b){
        if(b[WILDCARD]==searchItem){
            newList_.push(b);
        }
    })
    ms.setData(newList_);
}
}

now you have to add the line

removeInactiveGroups: true,

in your own javscript where you set up the configuration options
it's not perfect, since you have to hardcode some values, but you could add a new global default variable for the wildcards and it should work

I hope this helps people who are landing here in the future.

Disable other groups, when select an item

1 Answers1