How to Highlight Input Words using jQueryUI AutoComplete Widget

If you are using the jQueryUI AutoComplete widget in your application, then I am you sure might have come across the need to highlight the letters or the words that you type in the textbox. It’s simple and I’ll show you how this is done.

Highlight Input Words using jQueryUI AutoComplete Widget

See this example.

<html>
<head>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <style>
        .ui-autocomplete { 
            cursor: pointer; 
            height: 120px; 
            overflow-y: scroll;
        }    
    </style>
</head>
<body>
    <p>Type some values in the textbox to search: 
        <input type="text" id="txtBirds" placeholder="Type some value ..." /></p>
</body>

<script>
    $(document).ready(function () {
        BindControls();
    });

    function BindControls() {
        const arrBirds =[
            "Bald Eagle",
            "Cooper's Hawk",
            "Mourning Dove",
            "Abert's Towhee",
            "Brewer's Sparrow",
            "Black Vulture",
            "Gila Woodpecker",
            "Gilded Flicker",
            "Cassin's Sparrow",
            "Bell's Sparrow",
            "American Kestrel"
        ];

        $("#txtBirds").autocomplete({
            source: arrBirds,
            minLength: 0,
            scroll: true
        }).data("ui-autocomplete")._renderItem = function( ul, item ) {
            let txt = String(item.value).replace(new RegExp(this.term, "gi"),"<b>$&</b>");
            return $("<li></li>")
                .data("ui-autocomplete-item", item)
                .append("<a>" + txt + "</a>")
                .appendTo(ul);
        };
    }
</script>
</html>

Try it

In my markup section, I have an <input> element of type text, to which I have attach the AutoComplete method.

In the "script" section, I have an array of data (name of few birds) and its a static data. You can use jQuery Ajax to populate more data, dynamically.

I have used two different methods after the array declaration, which is, $("#txtBirds").autocomplete({ }) and .data("ui-autocomplete")._renderItem.

• Using the autocomplete() (the first) method, I am attaching the array (the data source) to the "textbox". Your AutoComplete feature will work and will predict and show data matching the letters you will type in the box.

And, if you want, you can add the .focus() method to show the dropdown list automatically when you set focus on the textbox.

• The "second" method is data(). In here we can customize the rendered items (according to our need), which we’ll extract from the array (or any data source). Here, we’ll highlight or set the typed character (or words) as bold.

The .data() method provides the _renderItem function, which has two parameters. The "ul" (or the <ul> element) object reference and "item" extracted from the array.

.data("ui-autocomplete")._renderItem = function (ul, item) { }

Later, using RegEx (or Regular Expression), it will do a "global" search for "any" character (using the gi) between [a-zA-Z] (any case), and will bold the term (the characters you have typed in the textbox).

var txt = String(item.value).replace(new RegExp(this.term, "gi"), "$&");

Now try this!

Instead of using tag to highlight the text or word, you can add a CSS class to highlight the entered text or words. First, create a CSS class in the Mark up section.

<style>
    .highlight {
        color: red;
        font-weight: bold:
    }
</style>

and then, replace the tag inside the _renderItem() function, with a element with the class attribute, like this …

var txt = String(item.value).replace(new RegExp(this.term, "gi"), "$&");

Finally, we’ll append the customized data to the <ul> element (which shows the list of values matching the letters you have typed).

return $("<li></li>")
    .data("ui-autocomplete-item", item)
    .append("<div>" + txt + "</div>")
    .appendTo(ul);

Conclusion

I use this widget in almost every application that has an AutoComplete feature, especially, E-Commerce sites. This highlight feature works even when you copy and paste a word or a character in the textbox.

In-addition, you can type an apostrophe to search. The widget will show you a list of values that has an apostrophe. If you noticed, in the above example I have few values with an apostrophe.

Important: Certain naming conventions have changed (or deprecated) related to AutoComplate in the current versions of jQueryUI AutoComplete widget.

← PreviousNext →