Font-weight for a Character in AutoComplete

Question

hi 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.

alex alex · Answer

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);

Manas Mohapatra · Answer

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..

alex alex · Answer

I did not catch.I need more details thankful for guide me.