How to bold matched text in suggestion list?

[Gabriel]

Hi.  I'm attempting to bold matched text from the autocomplete textbox in the suggestions list and am having some difficulty.  I'm passing a simple list of strings to the autocomplete control not an object.  I know I need to use a template to accomplish what I'm trying to do.  I realize my template line is completely wrong but I put there the kind of pseudo-code to convey the idea of what I want.  If someone could nudge me in the right direction as to a possible solution I would be very much appreciative.
Thanks!

<div class="DCF">
    @using (Html.BeginForm("Search", "Search", FormMethod.Post,
                                      new { enctype = "multipart/form-data" }))
    {
        <span>DCF DB</span>
        @(Html.Kendo().AutoComplete()
        .Name("dcfSearchBox")
       //.DataTextField("results") //commented as the list of strings do not need a dataTextField defined to display
        .Filter("contains")
        .MinLength(3)
        .HtmlAttributes(new { style = "width:250px" })
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("SuggestionSearch", "Search").Data("onAdditionalData");
            })
            .ServerFiltering(true);
        })
            .Template("#:results.Replace(dcfSearchBox.val(),\"<span style='font-weight: bold;'>#:dcfSearchBox.val()</span>\")#")
        )
        <br />
        @(Html.Kendo().Button()
        .Name("btnSubmit")
        .HtmlAttributes(new { type = "submit" })
        .Content("Search")
        )

    }
</div>

<script>
    function onAdditionalData() {
        return {
            text: $("#dcfSearchBox").val()//,
            //checkFilter: $("#dcfCheckFilter").is(':checked'),
            //filterText: $("#dcfFilterText").val()
        };
    }
</script>

[Gabriel]

So I'm able to manipulate the template without issue but I'm unable to obtain the value typed into the autocomplete control inside the template line at runtime.  I can get the value with JQuery, just not from within the template line.

.Template("#: data.replace('" + myAutoCompleteControl.Text + "', '<b>Some Formatted Text here</b>') #")

 

[Georgi Krustev]

Hello Gabriel,

Using a custom item template is the right approach. To get the search text, you can add the input element to the scope of template. Thus it will be accessible a this property. Check this Dojo demo for more information.

Regards,
Georgi Krustev
Telerik

 

 

[Gabriel]

Hi Georgi. Thanks for the response! Might there be an example of how to add the input element to the scope of template when the autocomplete control is implemented using razor notation?
Thanks!
Gabriel

[Alex Gyoshev]

Hello Gabriel,

Since you cannot pass a JavaScript function for a template through the MVC wrappers, you can achieve the same like this:

    @(Html.Kendo().AutoComplete()
          .Name("countries")
          .Template("#= formatValue(data) #")
    )

    <script>
        var input = $('#countries');
        function formatValue(itemText) {
            var textMatcher = new RegExp(input.val(), "ig");

            return itemText.replace(textMatcher, function (match) {
                return "<strong>" + match + "</strong>";
            });
        }
    </script>

Regards,
Alex Gyoshev
Telerik

 

 

[Gabriel]

Thanks Alex!  The answer always seems obvious after you've seen it.  Thanks again!