I'm using the dojo FilteringSelect element together on a Zend form, but I cannot make it work as I want. I have a store with three fields id
, label
, name
. Label will be used for the dropdown and should also be used for the search, while name
should be used for te display inside the box. The problem is that I can't find a way to make this behavior work.
Setting the labelAttr
value to label
works showing it on the dropdown, but the searchAttr
attribute governs both the search AND the display on the input box once a value is selected. I need to search the label
field since it is a collection of many fields, but display the value on name
, is it possible?
EDIT: @RichardAyotte The Dijit FilteringSelect widget uses a dojo.data.store, which is basically a javascript object, where each item is also an object with many parameters. You can set two special parameters on the store: labelAttr and searchAttr which will define a couple of behaviors. The FilteringSelect is tied to an INPUT box where you can search. If you click the box it will open the list of options, like a would. Here it shows whatever you defined as labelAttr. Now, if you type on the box, it will search on the store, using what is defined on the searchAttr field. It ALSO used the value of label to be display inside the input once you select something from the list (you can check it here http://dojotoolkit.org/reference-guide/1.9/dijit/form/FilteringSelect.html#displaying-rich-text-menu-labels-with-labelattr-and-labeltype)
What I wanted to do is "decouple" the searchAttr field into 2 different fields one for search and another to be used for display inside the input. AFAICT it is not possible though, and I will have to extend the FilteringSelect object
You can do this kind of thing with AOP. See dojo/aspect.
caveat: adding advice to private function _announceOption.
var countryField = new FilteringSelect({
label: 'Country'
, name: 'country_id'
, searchAttr: 'name'
, labelAttr: 'label'
, store: new CountryStore()
});
aspect.around(countryField, '_announceOption', function(origFunction) {
return function(node) {
this.searchAttr = 'label'
var r = origFunction.call(this, node);
this.searchAttr = 'name'
return r;
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With