Font-weight for a Character in AutoComplete

10y933Learn iOS Programming

I used this link For Auto Complete.:

http://www.c-sharpcorner.com/uploadfile/0c1bb2/creating-autocomplete-textbox-in-asp-net-mvc-5/

But I want to display any word in bold font which is searched.

take a look at this link : https://jsfiddle.net/adamboduch/jhZ6E/

which changes do I need to do for this function??

best regards.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

10y ago
thanks
I used this code and that was practical.

(function($) {
// Custom autocomplete instance.
$.widget("app.autocomplete", $.ui.autocomplete, {
// Which class get's applied to matched text in the menu items.
options: {
highlightClass: "ui-state-highlight"
},
_renderItem: function(ul, item) {
// Replace the matched text with a custom span. This
// span uses the class found in the "highlightClass" option.
var re = new RegExp("(" + this.term + ")", "gi"),
cls = this.options.highlightClass,
template = "$1",
label = item.label.replace(re, template),
$li = $("
").appendTo(ul);
// Create and return the custom menu item content.
$("").attr("href", "#")
.html(label)
.appendTo($li);
return $li;
}
});
// Create autocomplete instances.
$(function() {
$("#Name").autocomplete({
highlightClass: "bold-text",
source:
function(request, response) {
$.ajax({
url: "/Home/Index",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function(data) {
response($.map(data, function(item) {
return { label: item.Name, value: item.Name };
}));
}
});
},
messages: {
noResults: "",
results: ""
}
});
});
})(jQuery);

0
Manas Mohapatra10y ago
Yes, the fiddler URL(https://jsfiddle.net/adamboduch/jhZ6E/ ) is working as per your requirement means making font as bold as per search word..You can follow the code to implement your requirement.

You need to implement logic in _renderItem properties and it is present in the fiddler URL only..

Try to implement it and let us know if any isuse..
0
10y ago
I did not catch.I need more details
thankful for guide me.
0