Hi,
I'm using the RadAutoCompleteBox in one of our web forms and I'm having an issues with it on Microsoft Edge Mobile.
As it has problems with my OnClientLoad js function and only if I remove the OnClientLoad="OnClientLoad" binding from the control declaration the autocomplete will work.
In the desktop version of edge all is well same for chrome and chrome mobile,
the error:
"OnClientLoad is not defined"
"ReferenceError: OnClientLoad is not defined at Array.<anonymous> (https://my-domain.com/syllabisearch/he/pages/default.aspx:272:176322) at https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:51370 at Sys._Application._raiseInit (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:72276) at Sys._Application.initialize (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:69772) at b (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:71512) at HTMLDocument.a (https://my-domain.com/syllabisearch/Scripts/WebForms/MsAjax/MicrosoftAjax.js:6:71786)"
and the breakpoint is on the following code (attached in 'code-snippet-1.zip').
Here is my OnClientLoad JavaScript Function
01.
function OnClientLoad(sender, args) {
02.
$(".racToken").attr('tabindex', 0);
03.
var autoCompleteBox = $find("<%= RadAutoCompleteSearchBox.ClientID %>");
04.
var entryGeneralTitle = '<%=Idc.Yedion.SyllabiSearch.Helpers.Util.getLocalizedValue("AccessibilityGeneralSearchAutoCompleteBoxClear", CurrentLanguage)%>';
05.
var selectedEntryTitle = entryGeneralTitle.replace('{0}', autoCompleteBox.get_entries()?.getEntry(0)?.get_text());
06.
$(".racRemoveTokenLink").attr('title', selectedEntryTitle);
07.
$(".racToken").attr('title', selectedEntryTitle);
08.
$(".racRemoveTokenLink").attr('aria-label', selectedEntryTitle);
09.
$(".racToken").attr('aria-label', selectedEntryTitle);
10.
$(".racToken").on('keypress', function (e) {
11.
var key = e.which;
12.
if (key == 13) {
13.
e.preventDefault();
14.
autoCompleteBox.get_entries().clear();
15.
$("#<%= BtnClearSearch.ClientID %>").click();
16.
}
17.
18.
});
19.
$(".racToken").on('keydown', function (e) {
20.
var key = e.which;
21.
if (key == 8 || key == 46) {
22.
e.preventDefault();
23.
autoCompleteBox.get_entries().clear();
24.
$("#<%= BtnClearSearch.ClientID %>").click();
25.
}
26.
});
27.
$telerik.$(sender.get_inputElement()).on('keypress', function (e) {
28.
if (sender.get_entries().get_count() > 0) {
29.
e.preventDefault();
30.
}
31.
});
32.
33.
}
And this is my control declaration
1.
<
telerik:RadAutoCompleteBox
ID
=
"RadAutoCompleteSearchBox"
AllowCustomEntry
=
"false"
EnableAriaSupport
=
"true"
InputType
=
"Token"
ItemType
=
"Idc.Yedion.Internet.ObjectsModels.GeneralSearchResult"
runat
=
"server"
MinFilterLength
=
"2"
TextSettings-SelectionMode
=
"Single"
TokensSettings-AllowTokenEditing
=
"false"
OnClientLoad
=
"OnClientLoad"
DropDownPosition
=
"Static"
RenderMode
=
"Lightweight"
EnableScreenBoundaryDetection
=
"true"
EnableDirectionDetection
=
"true"
ZIndex
=
"1"
OnEntryAdded
=
"RadAutoCompleteSearchBox_EntryAdded"
OnEntryRemoved
=
"RadAutoCompleteSearchBox_EntryRemoved"
EnableClientFiltering
=
"true"
Skin
=
"Bootstrap"
Width
=
"100%"
></
telerik:RadAutoCompleteBox
>
Please advice,
Thanks,
Hagai.
I've created AutoCompleteBox in code behind and I'm using AutoCompleteBox.DataSourceSelect to get suggested values into a dropdown. By using up & down arrow keys I can move through the suggest list.
When I'm at:
- the last element in the list and I'm pressing down arrow key I do not want the list to go back to the first element - I want the list to stop at the last element no matter what,
- the first element in the list and I'm pressing up arrow key I do not want the list to go back to the last element - I want the list to stop at the first element no matter what.
How can I implement this 'prevention' in the OnClientLoad() event?
Here's a fragment of my code:
var autoCompleteBox = new Telerik.Web.UI.RadAutoCompleteBox
{
AllowCustomEntry = true,
AutoPostBack = false,
Delimiter = ",;\n",
DropDownPosition = Telerik.Web.UI.RadAutoCompleteDropDownPosition.Static,
EnableClientFiltering = false,
Filter = Telerik.Web.UI.RadAutoCompleteFilter.StartsWith,
HighlightFirstMatch = true,
InputType = Telerik.Web.UI.RadAutoCompleteInputType.Token,
MinFilterLength = 0,
MaxResultCount = 100,
};
autoCompleteBox.OnClientEntryAdded = "AutoCompleteBox_OnClientEntryAdded";
autoCompleteBox.OnClientRequesting = "AutoCompleteBox_OnClientRequesting";
autoCompleteBox.OnClientLoad = "AutoCompleteBox_OnClientLoad";
I would like to have a button with arrow image inside AutoCompleteBox (this control will be created in code behind), so after pressing it the dropdownlist with current text matching items would show up (if no text is present, then the first X number of items). I have the control already made in Winforms (using your Winforms components, attachment shows the winform's control look), so I was wondering if the same can be made in ASP.NET?
(btw: if you want to see the code of my Winform's control then you can see in this thread: https://www.telerik.com/forums/click-event-not-firing-for-autocompletesuggesthelper-popup-of-raddropdownlist )
I have a RadAutoCompleteBox. Many times I fill it dynamically with a SQL Query.
But on an occasion, I need to fill it with "N/A" and Select "N/A" Automatically.
Is there a way to do this?
Thanks,
Rog
I have this code that only allows the user to type a single word. Therefore the blank space (32) is taken as the end of the word.
I can GET the typed text and trim it this way:
var typed = $find('<%= RadAutoCompleteBox1.ClientID %>').get_inputElement().value.trim();
So if the client type "mytext " it will be converted to "mytext"
Now I need to know how to replace what user typed back with the trimmed text.
Thanks in advance!
Hello,
I'd like to know how to clear items and force close dropdown in AutoCompleteBox from client side (Javascript)...
Thanks!
How to set focus to AutoCompleteBox?
I tried the following but it doesn't work:
var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
autoComplete.focus();
Error: autoComplete.focus is not a function
Hi!
I am using AutoCompleteBox and I would like to know how to get the very first value of the dropdown list (client side) with Javascript.
Thanks!
EDIT: I figured how to do this using the event dropDownItemDataBound in case someone else needs it:
var typed = "";
var current = "";
function requesting(sender, eventArgs) {
var acbox = $find('<%= RadAutoCompleteBox1.ClientID %>');
var acboxcontents = acbox.get_inputElement();
typed = acboxcontents.value;
}
function dropDownItemDataBound(sender, args) {
if (current != typed) {
if (typed.substr(typed.length-1, 1) == " ") {
var acbox = $find("<%= RadAutoCompleteBox1.ClientID %>");
var newEntry = acbox.createEntry(args.get_item().get_text(), args.get_item().get_text());
var entries = acbox.get_entries();
entries.add(newEntry);
current = typed;
typed = "";
}
}
}
Right after the client types a blank space (for instances "mysearch ") the code above gets the first value of the dropdown list, converts it into a token, ignores all the rest of the values in the list and clear up the typed string.
Now I just need to know how to set focus back to AutoCompleteBox... Telerik controls are like puzzles and everything is so hard to achieve. :(