Changing the Search Behavior of a Dojo Filtering Select in XPages

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:

FilteringSelect_SearchMiddle_1

(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:

FilteringSelect_SearchMiddle_2

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!

FilteringSelect_SearchMiddle_3

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.

FilteringSelect_SearchMiddle_4

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>
Advertisements

5 responses to “Changing the Search Behavior of a Dojo Filtering Select in XPages”

  1. Ryan says :

    Thanks, Brad. This is very helpful.

  2. karthik says :

    Thanks Brad, its very nice article. I just have a question though its silly. I am new to Dojo. How can we add default value for dojo Filtering Select in Xpages.

    • Brad Balassaitis says :

      The first option in the list will be selected by default, but you can override it by setting the defaultValue property. When you select the Dojo Filtering Select control, you can find it in the Properties view under All Properties > data > defaultValue

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: