How can I eliminate lag and fix partial match searches in a dojo FilteringSelect widget?

Question

I'm having trouble making a dijit/form/FilteringSelect widget behave itself. I suspect my combination of options is just off, but I can't seem to hit on the right pattern.

My data source is a list of book names, and I would like the user to be able to use the widget either by either pulling down the menu and selecting an option or typing in part of a name and getting a match. The tricky part is the filter that happens on typing in a value needs to happen with wild card matches on both ends because it is quite likely that the word typed will be the second word in the name.

My problem is with setting an appropriate search delay and with what continuing to type after a search happens. First, the default search delay of 200ms works fine as long as you can keep typing, but with queryExpr set to *${0}* this seems to be broken. When you continue typing you start up with the prefix of the current match instead of only what you had typed so far.

The only way I got this to be usable at all is setting a much larger delay (500ms) and hoping people don't make many typing mistakes. This has the undesired effect of delaying the drop down menu.

    var books_widget = new FilteringSelect({
      placeHolder: "Kitap",
      store: book_list_store,
      style: 'width: 12em',
      searchAttr: "name",
      autocomplete: false,
      highlightMatch: 'first',
      ignoreCase: true,
      queryExpr: '*${0}*',
      searchDelay: 500
    });
    books_widget.placeAt(wrapper_node);

Is there...

1. ...any way to decouple the searchDelay from the dropdown menu triggered with the mouse so that the UI does not have pointless lag?

2. ...a proper way to arrange the settings such that when typing in a partial match, the search function does not destroy the existing entry and you can continue to type characters extending the pattern?

Answer 1

You do not have to use the search delay. The behavior you're getting is because the autoComplete property is set to true .
However, in your configuration you're using autocomplete , and you should use an uppercase "C".

I suppose this fixes both problems, as your dropdown menu will no longer be delayed and when a partial match is found it will no longer override your current text.

The searchDelay property is commonly used to debounce the store access (and perhaps REST access). When you enter "hello world" without a search delay, the store would be queried for each change, so for:

h
he
hel
...
hello world

If you debounce it by using the searchDelay , then it will only access your store, 500 milliseconds after the last change, so if you type fast enough, it will only use it to query "hello world" .

Answer 2

One other thing that may reduce lag: provide a limited number of responses that match the input.

Using pageSize: "100" as an input parameter will give only the first 100 matches, along with a link for "more choices".

This really helped performance on a very large set of choices during the typing to narrow the selection.