How highlight words jquery ui autocomplete

Question

i'm using this script http://jqueryui.com/demos/autocomplete/#default with database. i want to highlight typed words like this: www.docs.jquery.com/Plugins/Autocomplete. Please help me.

Answer 1

Looks like what is running on http://docs.jquery.com/Plugins/Autocomplete has a highlight method.

You can recreate this by grabbing the regex their highlight method and using it to modify your results that get sent back from your ajax request to you database:

$("#example").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "search.php",
            dataType: "json",
            data: request,
            success: function( data ) {

                var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
                var result = $.map(data, function(value){
                    return value.replace(regex, "<strong>$1</strong>");
                });
                response( result );
            }
        });
    }
});

It would probably be smarter to add the <strong> wrap on the server side since it will most likely already be looping through each on of the results.