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

JavaScript
1

Please take a look at my multi-column autocomplete textbox I have in this jsFiddle link:

Note that as the user types a color name, a drop-down list appears. I want to make it so that the user’s current search string is bolded in each of the entries in the drop-down list. For example, if the user types “ant” (without quotes), there are two possible items: Antique Brass and Eggplant. I want the search results to look like this:

#CD9575, Antique Brass, (205, 149, 117)
#6E5160, Eggplant, (110, 81, 96)

How do I do this?

2

HTML provides no way for the options in a dropdown list to be made bold.

3

Yes, as far as most if not all browsers are concerned “forms” are more part of the browser than they are part of a page.

AFAIK this is so a user will “recognize and be familiar with” a form.

I’ve found that some elements can sometimes be styled in some ways for some browsers.
But trying to do so is an exercise in frustration. (notice all the “somes” there?)

4

I think I got it! https://jsfiddle.net/MrSnrub/pk0kf0hn/34/
This all goes into the _renderItem function:

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

t += '<span style="padding:0 4px;float:left;width:' + column.width + ';">' + whole_word + '</span>';

This will work, right?

5

When it’s not an actual dropdown list and you are instead simulating one the hard way, by editing the library files no less, then yes it works that way.

There are several sins that are being committed here to make it work though, which I hope others around here will have the time to cover in greater depth.

6

Yes, I’m relatively new to programming, so I would love to know what I’m doing wrong here and what is the right way to do it.

7

One of the things that was done wrong was on our part, for assuming that an autocomplete dropdown list was based on the HTML specifications for a dropdown select box.

The only other thing that has been done wrong is to edit the library code for the multicolumn autocomplete widget. When someone else is looking after the project, or even yourself in a year or two, that library may be updated to a newer version of the multicolumn autocomplete. After which at some stage someone might notice that the bold stuff doesn’t work any more.

Much better solutions exist where the library code is left as is, and separate code is used to provide the improved behaviour that you are after.

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

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.