I have a ComboBox that is querying the database to populate itself using LoadOnDemand and calling a method specified by WebServiceSettings-Method property. It dynamically updates the list based on what the user has typed in the box. Is there a way to "debounce" calls to the web method as making three calls when the user types in three characters instead on one when they finish typing is hitting the database harder than I would like. I have tried setting a debounce timer on the call to my JavascriptOnClientItemsRequesting function, but it seems to not wait on my Javascript timer before calling the web method. Here is my code:
01.
<
telerik:RadComboBox
ID
=
"myDropdown"
02.
runat
=
"server"
03.
EnableLoadOnDemand
=
"true"
04.
IsCaseSensitive
=
"false"
05.
MarkFirstMatch
=
"true"
06.
Skin
=
"WebBlue"
07.
Width
=
"130px"
08.
Height
=
"120px"
09.
AllowCustomText
=
"true"
10.
ShowWhileLoading
=
"false"
11.
ItemRequestTimeout
=
"0"
12.
ShowDropDownOnTextboxClick
=
"true"
13.
ShowToggleImage
=
"false"
14.
CssClass
=
"TextBox"
15.
EnableVirtualScrolling
=
"true"
16.
OnClientBlur
=
"CustComboBoxBlurHandler"
17.
DropDownWidth
=
"200px"
18.
CloseDropDownOnBlur
=
"true"
19.
OnClientItemsRequesting
=
"CustComboBoxSetContext"
20.
OnClientSelectedIndexChanged
=
"CustComboBoxSelectedIndexChangedHandler"
21.
ClearOnBlur
=
"true"
>
22.
<
WebServiceSettings
Method
=
"Search_GetCustomerNameNosWithJobs"
Path
=
"Lookups.asmx"
/>
23.
<
ClientItemTemplate
>
24.
<
table
width
=
"100%"
cellpadding
=
"0"
cellspacing
=
"0"
border
=
"0"
>
25.
<
tr
height
=
"12px"
>
26.
<
td
>#= Text #</
td
>
27.
<
td
>#= Attributes["Name"] #</
td
>
28.
</
tr
>
29.
</
table
>
30.
</
ClientItemTemplate
>
31.
</
telerik:RadComboBox
>
01.
var
debounceTimer;
02.
var
debounceTimeout = 200;
03.
function
CustComboBoxSetContext(sender, args) {
04.
clearTimeout(debounceTimer);
05.
debounceTimer = setTimeout(SetContext, debounceTimeout, sender, args);
06.
}
07.
08.
function
SetContext(sender, args) {
09.
var
context = args.get_context();
10.
if
(!sender.prefix)
11.
sender.prefix =
""
;
12.
if
(!window.event || sender.directcall) {
13.
sender.prefix = args.get_text();
14.
}
15.
var
id = sender.get_id();
16.
if
(sender.prefix ===
""
) {
17.
args.set_cancel(
true
);
// cancel sever call if nothing typed in
18.
return
false
;
19.
}
20.
context[
"prefix"
] = sender.prefix;
21.
return
true
;
22.
}