Change the value typed into the inputbox programatically

3 Answers 12 Views
AutoCompleteBox
Yan Moura
Top achievements
Rank 1
Veteran
Iron
Yan Moura asked on 20 May 2021, 06:53 PM

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!

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 25 May 2021, 06:39 PM

Hi Yan,

The empty spaces at the end of the custom entries are trimmed by design by AutoCompleteBox. You can disable this functionality by adding the following overwrite on the page holding the AutoCompleteBox:

            Telerik.Web.UI.RadAutoCompleteBox.prototype._createEntriesFromText = function(text) { // Recreates the entries based on the passed text
                var entriesTexts,
                    separatorRegex,
                    delimiter = this.get_delimiter(),
                    length;

                if (!this._getIsDoubleSymbolDelimiter()) {
                    entriesTexts = this.get_text().split(delimiter);
                } else {
                    separatorRegex = this._getDoubleCharRegExp(delimiter);
                    entriesTexts = this.get_text().split(separatorRegex);
                }

                length = entriesTexts.length;
                this.get_entries().clear();

                if (this._isInSingleSelectionMode()) {
                    if (text) {
                        this._addEntry(this.createEntry(text));
                    }
                } else {
                    for (var i = 0; i < length; i++) {
                        //va entryText = entriesTexts[i].trim(); //original code
                        var entryText = entriesTexts[i];

                        if (entryText) {
                            this._addEntry(this.createEntry(entryText));

                            // Here we take the char after entry text and add it in delimiters array:
                            if (this._getIsDoubleSymbolDelimiter()) {
                                var startIndex = text.indexOf(entryText),
                                    delimiterString = text.substr(startIndex + entryText.length, 1);

                                text = text.substr(text.indexOf(delimiterString));
                            }
                        }
                    }
                }
            }

 

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Yan Moura
Top achievements
Rank 1
Veteran
Iron
answered on 25 May 2021, 07:04 PM | edited on 25 May 2021, 07:04 PM

Hi Vessy,

I think I wasn't too clear in my question.

I need to know how to fill in the ACBox input text field programmatically (preferrably from JS). :-)

Thanks!

Peter Milchev
Telerik team
commented on 28 May 2021, 01:53 PM

This can be achieved in the keypress event of the input element where you can cancel the event if it is space. A similar implementation on how to subscribe to the keypress event and cancel it based on a condition is described here: https://www.telerik.com/support/kb/aspnet-ajax/autocompletebox/details/allow-to-select-only-one-text-item-or-a-single-token-item-in-radautocompletebox 
0
Yan Moura
Top achievements
Rank 1
Veteran
Iron
answered on 29 May 2021, 11:03 PM

I figured it:

var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");
autoComplete._inputElement.focus();
Vessy
Telerik team
commented on 31 May 2021, 08:16 AM

Thanks for sharing the found solution, Yan!
Tags
AutoCompleteBox
Asked by
Yan Moura
Top achievements
Rank 1
Veteran
Iron
Answers by
Vessy
Telerik team
Yan Moura
Top achievements
Rank 1
Veteran
Iron
Share this question
or