jQuery help: need to bold letters in autocomplete as the user types

JavaScript
8

With autocomplete, we can override the display section with our own code in the following manner:

$("#search").mcautocomplete({
    ...
}).mcautocomplete("instance")._renderItem = function (ul, item) {
    // override code in here
};

Documentation on this is found at http://jqueryui.com/autocomplete/#custom-data

So, now I can use jquery.mcautocomplete.js as an external resource, and give it my own custom item renderer.

itemsWithSearchHighlight(ul, item) {
    var rowContent = $.map(this.options.columns, function (column, index) {
        var whole_word = item[column.valueField ? column.valueField : index];
        var current_search_string = document.getElementById("search").value;

        // Highlight current search term.
        var regex = new RegExp('(' + current_search_string + ')', 'gi');
        whole_word = whole_word.replace(regex, "<b>$1</b>");

        return '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + whole_word + '</span>';
    }).join("");

    return $('<li></li>')
        .data('ui-autocomplete-item', item)
        .append('<a class="mcacAnchor">' + rowContent + '<div style="clear: both;"></div></a>')
        .appendTo(ul);
}

You can see this in with a modified version of your sample code at https://jsfiddle.net/pmw57/yeppoxqz/4/

The benefit of doing things this way is that the changes are easier to see, and update.

We can even use a more recent version of the library, just by updating the external resource from version 2.1 of the multicolumn autocomplete to version 2.2, and our code still continues to works too.