The default behavior of a Dojo Filtering Select control is to take what you type and filter the options in the list based on what options start with that value. In this post, I’ll show how to change it to search any part of the value (more like a Select2).
Default Filtering Behavior
To demonstrate, I set up this Dojo Filtering Select:
Image may be NSFW.
Clik here to view.
(This post shows the easiest way to create a Dojo Filtering Select)
<xe:djFilteringSelect id="djFilteringSelect2"> <xp:selectItem itemLabel="abc"></xp:selectItem> <xp:selectItem itemLabel="bcd"></xp:selectItem> <xp:selectItem itemLabel="cde"></xp:selectItem> <xp:selectItem itemLabel="efg"></xp:selectItem> <xp:selectItem itemLabel="fgh"></xp:selectItem> <xp:selectItem itemLabel="ghi"></xp:selectItem> <xp:selectItem itemLabel="hij"></xp:selectItem> </xe:djFilteringSelect>
As I type a letter, it filters the list down to any values that start with that letter:
Image may be NSFW.
Clik here to view.
Searching Any Part of the Value
If you want to change the behavior to match any part of the value when searching, you can update the queryExpr property. Dojo documentation says that you need to set it to "*${0}*" for the desired outcome.
${0} will return the value that the user has typed into the field so far. The default behavior is "${0}*", but if you also add the wildcard (*) before the search term, it will look for the term anywhere in the value.
Updating queryExpr in XPages
The Dojo Filtering Select control has a queryExpr property. However, entering this search term does not bring the desired result.
If you enter *${0}* into the property (XPages will automatically enclose all attribute values in double quotes), it looks good in the source of the page…
<xe:djFilteringSelect id="djFilteringSelect2" queryExpr="*${0}*">
… but it breaks the field (you get a default value, but no drop-down list) because it ends up sending this to the browser:
<select dojoType="dijit.form.FilteringSelect" queryExpr="*0*" id="view:_id1:djFilteringSelect2" name="view:_id1:djFilteringSelect2">
It is automatically removing the $, {, and } characters.
Fortunately, we can fix this pretty easily by computing the value and escaping each of those characters with a backslash (\).
return '*\$\{0\}*';
Now our source tag in XPages looks like this:
<xe:djFilteringSelect id="djFilteringSelect2"
queryExpr="#{javascript:return '*\$\{0\}*';}">
This allows it to pass the value through to HTML properly, which fixes the field and enables the behavior that we’re looking for.
If I type a ‘c’ into the field, I know see a list filtered to all options that have a ‘c’ anywhere in the value!
Image may be NSFW.
Clik here to view.
Updating the Highlighting Behavior
When you change the default search behavior, the highlighting of the value in the field seems odd. I type a ‘c’ into the field, and it auto completed the field with the first value that contained a ‘c’, but highlighted everything after the first character (since I type in 1 character).
This now seems counterintuitive since it’s not only filtering from the front of the list.
Using the autoComplete property of the Dojo Filtering Select, we can stop this behavior.
If you set autoComplete to false, then it won’t automatically fill in the first matching value.
Image may be NSFW.
Clik here to view.
I like this a lot more from a usability perspective. Just be aware that, since it’s not autocompleting with a valid value, if you leave the field before selecting a value, you’ll get an error because the field does not contain a valid value. (Although that validation can also be turned off.)
Here is the full source of my field, including these updates:
<xe:djFilteringSelect id="djFilteringSelect2"
queryExpr="#{javascript:return '*\$\{0\}*';}" autoComplete="false">
<xp:selectItem itemLabel="abc"></xp:selectItem>
<xp:selectItem itemLabel="bcd"></xp:selectItem>
<xp:selectItem itemLabel="cde"></xp:selectItem>
<xp:selectItem itemLabel="efg"></xp:selectItem>
<xp:selectItem itemLabel="fgh"></xp:selectItem>
<xp:selectItem itemLabel="ghi"></xp:selectItem>
<xp:selectItem itemLabel="hij"></xp:selectItem>
</xe:djFilteringSelect>
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
