Question

I have implemented autocomplete using Jquery. I have also implemented highlighting the matching text. I am using <strong> tag in the high light function. When I go through the autocomplete dropdown one by one using keyboard arrows, the text where I am currently on, is displayed in the text box. When it displays, it displays with the <strong> tag. Any suggestions to remove the tag? I have given my code below.

<input type="text" id="institution-list"/>

<script type="text/javascript" language="javascript">
$(function () {
    $("#institution-list").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/home/findinstitutions", type: "POST", dataType: "json",
                data: { searchText: request.term, maxResults: 10 },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: highlight(item.InstitutionName, request.term),
                            id: item.InstitutionId
                        };
                    }));

                }
            });
        },
        minLength: 3
    })
        .data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
            .data("item.autocomplete", item)
              .append($("<a></a>").html(item.label))
              .appendTo(ul);                
        };
});

function highlight(s, t) {
    var matcher = new RegExp("(" + $.ui.autocomplete.escapeRegex(t) + ")", "i");
    return s.replace(matcher, "<strong>$1</strong>");
}
</script>

Answer 1

Find below the solution I found for my problem

Existing code:

response($.map(data, function (item) {
                    return { label: highlight(item.InstitutionName, request.term),
                        id: item.InstitutionId
                    };

Solution:

response($.map(data, function (item) {
                    return { label: highlight(item.InstitutionName, request.term),
                        value: item.InstitutionName, 
                        id: item.InstitutionId
                    };

The original code returned the label (which had embedded html tags) and no value. Since there was no value, the textbox used the label to display. Now, I explicitly assign the value of the text box with my text (without html tags) and that fixes my problem.

Here is the snapshot of how it appears now.