Init with value which call by queryFunction

[cindyming]

The issue in #228

@arendjr , Sorry, Maybe I did't discribe the question clearly, I don't want to cache the submenu, I want to load the submenu before the mouse over action. I try to use the mouseover event to trigger the query function, but it don't work

use case:

1. click create a filter
2. use the selectivity to init a selector the init code like this
   $(item).selectivity({ allowClear: true, items: { ['id':"amount", "text":"Amount"], ['id':"name", "text":"Menu Name",query: queryFunction, shouldOpenSubmenu: true, showSearchInput: true,], }, //showDropdown:true, multiple: multiple, placeholder: $(item).attr('placeholder'), showSearchInputInDropdown: false, })
3. after I choose a menu name, Menu Name, with the id "name##menuname"
4. click save
5. click the saved fitler
6. I try to set the default value of the selector with the val "name##menuname", but the submenu query isn't queried, So the selector label text don't show correctly. So I want to preset the submenu item list when I try to update fitler

[cindyming]

@arendjr can you please help me on this?

[arendjr]

I’m sorry, I really don’t understand what it is you’re trying to achieve. Can you create a JSFiddle with an example?

[cindyming]

`function queryFunction() {
results = {
[id: 'name###1', text: "ere"],
[id: 'name###2', text: 'er2']
};

jQuery(results).sort(function(a, b) {
a = transformText(a);
b = transformText(b);
var startA = a.slice(0, term.length) === term,
startB = b.slice(0, term.length) === term;
if (startA) {
return startB ? (a > b ? 1 : -1) : -1;
} else {
return startB ? 1 : a > b ? 1 : -1;
}
});
setTimeout(function() {
query.callback({
more: results.length > offset + 10,
results: results
});
}, 500);
}

$('#example').selectivity({
allowClear: true,
items: {
[id: "amount", text: "Amount"],
[id: "name", text: "Menu Name",
submenu:{
query: queryFunction, showSearchInput: true
}
]
},
showDropdown: true,
multiple: multiple,
placeholder: $(item).attr('placeholder'),
showSearchInputInDropdown: false,
})

$('#example').selectivity('val', 'name###1');
`

[cindyming]

@arendjr https://jsfiddle.net/cindyming/akwjqp2t/23/ the sample is here

[cindyming]

@arendjr Can you please take a look?
Thanks
Cindy

[arendjr]

Hi! If you change the last line in your fiddle to this:

$('#example').selectivity('data', {
  "id": "name#####Send Multi Post",
  "text": "Send Multi Post"
});

Does that do what you're trying to accomplish?

[cindyming]

@arendjr I can't be able to get the text after the init for some reason, Do we have any solution to trigger the ajax loading before I use $('#example').selectivity('val', "name#####Send Multi Post")

[arendjr]

I’m afraid you’re searching into the wrong direction. Doing the AJAX call won’t automatically cause it to find the text. The reason setting the value isn’t sufficient is because Selectivity cannot find (without AJAX call) any item with the same ID that provides the text. So calling data instead of value gives you an opportunity to set the text explicitly. Maybe you don’t know this text without doing an AJAX call either, but then you should do this outside of Selectivity and then call data.

[cindyming]

@arendjr I try to add $('#example').selectivity('data', {
"id": "name#####Send Multi Post",
"text": "Send Multi Post"
}); It still don't show the "Send Multi Post".