This is a migrated thread and some comments may be shown as answers.

How to bold matched text in suggestion list?

5 Answers 317 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Gabriel
Top achievements
Rank 1
Gabriel asked on 18 Sep 2014, 03:16 PM
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>

5 Answers, 1 is accepted

Sort by
0
Gabriel
Top achievements
Rank 1
answered on 18 Sep 2014, 08:48 PM
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>') #")
 
0
Georgi Krustev
Telerik team
answered on 19 Sep 2014, 08:51 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gabriel
Top achievements
Rank 1
answered on 19 Sep 2014, 05:57 PM
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
0
Accepted
Alex Gyoshev
Telerik team
answered on 23 Sep 2014, 12:37 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Gabriel
Top achievements
Rank 1
answered on 23 Sep 2014, 12:49 PM
Thanks Alex!  The answer always seems obvious after you've seen it.  Thanks again!
Tags
AutoComplete
Asked by
Gabriel
Top achievements
Rank 1
Answers by
Gabriel
Top achievements
Rank 1
Georgi Krustev
Telerik team
Alex Gyoshev
Telerik team
Share this question
or