How to bold matched text in suggestion list?

6 posts, 1 answers
  1. Gabriel
    Gabriel avatar
    8 posts
    Member since:
    Sep 2014

    Posted 18 Sep 2014 Link to this post

    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>
  2. Gabriel
    Gabriel avatar
    8 posts
    Member since:
    Sep 2014

    Posted 18 Sep 2014 in reply to Gabriel Link to this post

    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>') #")
     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 19 Sep 2014 Link to this post

    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.

     
  5. Gabriel
    Gabriel avatar
    8 posts
    Member since:
    Sep 2014

    Posted 19 Sep 2014 in reply to Georgi Krustev Link to this post

    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
  6. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 23 Sep 2014 Link to this post

    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.

     
  7. Gabriel
    Gabriel avatar
    8 posts
    Member since:
    Sep 2014

    Posted 23 Sep 2014 in reply to Alex Gyoshev Link to this post

    Thanks Alex!  The answer always seems obvious after you've seen it.  Thanks again!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready