remove <strong> from text box - jquery-ui

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

I think that the problem is that you're taking the label of your recently found data and render it as HTML, instead of plain text. Thus, instead of Berkeley, your autocomplete is showing <strong>Ber</strong>keley.
Try to parse it and remove any HTML tag before displaying it:
function sanitize(text){
var regex = /(<([^>]+)>)/ig;
return text.replace(regex, "");
}
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(sanitize(item.label)))
.appendTo(ul);
};
The regular expression was extracted from here: Remove HTML Tags in Javascript with Regex

Answer 2

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.