jQuyer UI autocompletion with bold search term HTML: <form action="?" class="search" method="post"> <input type="text" name="search" id="q" value="Search for" /> <button type="submit">Search</button> </form>

jquery-autocomplete.js

(function ($) {

    var cache = {},
        q = $( '#q' );
        qval = q.val();

    q.focus(function() {
        if(q.val() == qval) {
            q.val('');
        }
    });

    q.blur(function() {
        if(q.val() == "") {
            q.val(qval);
        }
    });

    $.ui.autocomplete.prototype._renderItem = function (ul, item) {
        item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<b>$1</b>");
        return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
    };

    q.autocomplete({
        appendTo: '.search',
        delay: 500,
        minLength: 3,
        open: function( event, ui ) {
            q.addClass( 'focused' );
        },
        close: function( event, ui ) {
            q.removeClass( 'focused' );
        },
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }

            $.getJSON( "ajax/autocomplete_q.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                response( data );
            });
        }
    });
    
});