How to Show Label value in Search Box UI and get the Value only in Querry

[vikadlimatti]

Hi i am having difficulties in achiving this. For example i am having Value as 123 and label as Vinod. When i select the facet defaulty its is taking Value and showing 123 in search box UI. I want it to show Vinod in UI but in query object i want 123. Is this can be done?

Present UI and Query: account: 123 and query = account: 123 But i want UI account: Vinod and query as account: 123

Is this can be achieved?

Thanks Vinod

[nathanstitt]

Hi Vinod,

At the present, what is displayed in the UI must match the query object's keys. The distributed CSS does apply "text-transform: uppercase;" styling, but the text itself is identical.

One work-around for this is to keep another object that contains a lookup table and use that to rename the keys once a selection is made. For instance in order to rename the "U.S. State" keys from the demo page:

var keyLookupTable = {
    "U.S. State": "state"
};

var query={};
_.each(searchCollection.models, function(model){
    var key = keyLookupTable[model.get('category')] || model.get('category')
    query[key]=model.get('value');
});

console.log(query)

[vikadlimatti]

Thanks It really helped me and i got it worked . I have one more question: Can we Allow Multi-select in dropdowns? Example if i want to Select 3-4 states with mouse.

Thanks Once again in advance. Vinod

[nathanstitt]

Hey @vikadlimatti,

VisualSelect doesn't currently support multi-selection. It uses the jQuery UI Autocomplete widget for the selection dropdown which does support multi-selection, so it should be possible to support it: http://jqueryui.com/autocomplete/#multiple-remote We'd definitely be interested in contributions in this area

If you're interested in taking a poke at it, the code that initializes the drop down is https://github.com/documentcloud/visualsearch/blob/7f538e6896292bebe620d50301077553640760e5/lib/js/views/search_facet.js#L71-L109

I suspect that adding multi-selection will be a bit more difficult than just setting the appropriate options on the Autocomplete initialization. You'll also have to work through areas that currently return a string, and will now be returning an array.