Use InputService.KeyUp

#1

All,
How to use the InputService.KeyUp to create a dynamic search that updates the list when the user types in the search field.
I was able to achieve the functionality using JQuery, but looking for a solution with less custom code and more Dundas Tools.

Thanks.

#2

In general, we do not use (or recommend the use) of the ‘keyup’ event in JavaScript without delay logic. The reason is that it fires way too much, and if someone is typing fast it’s going to spam the event so much that any async call you’re doing is going to overwhelm the server, and likely return in an indeterminate order (or at least waste all the N-1 calls).

The best way to accomplish this on a dashboard is to usually add filter->textbox, but don’t connect it to any view parameter. Then use the ‘value changed’ action to add a script. This action will fire whenever the control loses focus, or the user presses ENTER (there may be slight variations between browsers).

If you really want to have a control that populates after keypress instead of ‘change’ (focus loss or ENTER), then the advanced way would be:

  1. Add a HTML label with the following inside of it:

    <div id="mysearchcontrol" width="400px"></div>

  2. Use the following script in the ‘ready’ action to create a Dundas search control and bind to the search event (which uses keyup but with logic on delay to avoid event spam:

    var search = new dundas.controls.Search($("#mysearchcontrol").get(0), {
    "watermark": "enter your search here..."
    });
    $(search).bind(dundas.controls.SearchConstants.SearchControlValueChangedEventName, function (e) {
    var searchTerm = e.value;
    });

#3

Terrence,
Thanks for your help, I understand a server call on any single type,
to correct that, there would be a javascript timer reset at any keyUp. Then if 500ms without an event, the server call would be made.

Thank you.