Get the entered ComboBox input-Value (Not the currently selected one)

[Lars]

Hello,

we are using a kendo-combobox in our razor-pages application as a search-box. I want to highlight the allready entered text within the results.

For that I need to get the currently entered Input-Value from the Combobox.
But - $('\#customerComboBox').val() just returns the currently SELECTED Item in the Combobox.
(And nothing when no entry is selected)

How can I access the currently entered Input-Text from the <kendo-combobox ...> before the user selects an Item?
(This works within a <kendo-autocomplete ...> -Control)

 

<kendo-datasource name="dataSourceCustomer" server-filtering="true">
<transport>
        <read url="/pages/Custom/?handler=CustomerRead" datatype="json" type="POST" />
    </transport>
</kendo-datasource>

<kendo-combobox name="CustomerComboBox"
    datasource-id="dataSourceCustomer"
    datatextfield="Text"
    datavaluefield="Value"
    filter="FilterType.Contains"
    highlight-first="true"
    template="#=Text # | #=console.log($('\#CustomerComboBox').val()) #"
    >
</kendo-combobox>

 

Thanks in advance and best regards,

Lars

[Eyup]

Hi Lars,

You can use the dataBound event handler when searching to highlight the matching text:
https://docs.telerik.com/kendo-ui/knowledge-base/combobox-highlight-matched-text

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Lars]

Hi Eyup,

Thanks for your reply. Unfortunately does the linked solution not work in this case.

I have added the function and added: on-data-bound="onDataBound" to my Combobox, but

var inputText = $('.k-input').val().toLowerCase();

Still does not contain the value, that is currently entered (not selected) inside the combobox.
(Thus no text is highlighted)

Would you please give me an example on how to access the currently entered value, for a combobox, that is created with a taghelper?

As the same thing works with a <kendo-autocomplete ...> -Control and your linked Solution seems to assume that it should work like this for a Combobox, maybe it is just an Issue with the current <kendo-combobox>-TagHelper?

Best regards,

Lars

[Eyup]

Hello Lars,

Actually, this shouldn't be related to tag-helper mode of defining. Perhaps, there is some kind of timing issue (if the data is fetched remotely, for instance). Could you wrap the dataBound logic within a setTimeout statement and let me know about the result?
https://www.w3schools.com/jsref/met_win_settimeout.asp

If the issue remains, I will create a new Core project with the mentioned tag-helpers scenario and send it to you for verification.

Regards,
Eyup
Progress Telerik

[Lars]

Hi Eyup,
Thanks for your reply, I have finally found a solution for this.

tl,dr: The current input-value is not inside "myControlName", but inside a control with the name "myControlName_input".

My current solution now looks like this:

<kendo-combobox name="customerComboBox"
    datasource-id="dataSourceCustomer"
    datatextfield="Text"
    datavaluefield="Value"
    value="@Model.CustomerComboBox"
    text="@Model.CustomerDisplayName"
    filter="FilterType.Contains"
    template="#= highlighter(Text, 'customerComboBox')#"
    height="520"
    class="icon_search"
    placeholder="@Localizer["Please select customer..."].Value">
</kendo-combobox>

 

With the "template" attribute a javascript function is called.
This function highlighter(..) selects the corresponding "_input" control, and highlights the allready entered input with the second function "highlightText(..)".

function highlightText(completeText, searchTextToHighlight) {
    if (isEmpty(completeText) || isEmpty(searchTextToHighlight)) {
        return completeText;
    }
    var textMatcher = new RegExp(searchTextToHighlight, "ig");
    return completeText.replace(textMatcher, function (match) {
        return "<strong>" + match + "</strong>";
    });
}

function highlighter(completeText, controlName) {
    var inputControlName = controlName + "_input";

    var elems = $(":input[name$='" + inputControlName + "']");
    if (elems.length > 0) {
        var textToHighlight = elems.first().val();
        return highlightText(completeText, textToHighlight);
    }
    return completeText;
}

 

 

Best regards,

Lars

[Eyup]

Hi Lars,

Yes, this is a good catch. I'm glad you've managed to resolve the issue and thank you for sharing your solution with our community.

Regards,
Eyup
Progress Telerik