Rendering Autocomplete Results In Another Div

Extending the jQuery UI autocomplete widget to add a new suggest option. This is a function that can render the autocomplete suggestions outside of the default autocomplete menu.

HTML

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" class="ui-widget-content" />
</div>
<div class="ui-widget ui-widget-content results">
</div>

CSS

body {
    font-size: 0.8em;
}

.results {
    margin-top: 0.5em;
    border: none;
}

.results a {
    display: block;
    padding: 0.2em;
}

JavaScript

(function( $ ) {
    
    // Extend the autocomplete widget with a new "suggest" option.
    $.widget( "app.autocomplete", $.ui.autocomplete, {
        
        options: {
            suggest: false    
        },
        
        // Called when the autocomplete menu is about to be displayed.
        _suggest: function( items ) {
            
            // If there's a "suggest" function, use it to render the
            // items. Otherwise, use the default _suggest() implementation.
            if ( $.isFunction( this.options.suggest ) ) {
                return this.options.suggest( items );
            }
            
            this._super( items );
            
        },
        
        // Called when the autocomplete menu is about to be hidden.
        _close: function( e ) {
        
            // If there's a "suggest" function, call it with an
            // empty array so it can clean up. Otherwise, use the
            // default _close() implementation.
            if ( $.isFunction( this.options.suggest ) ) {
                this.options.suggest( [] );
                return this._trigger( "close", e );
            }
            
            this._super( e )
            
        }
        
    });
    
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];

    $(function() {
    
        // Supply a custom "suggest" function that renders
        // each autocomplete suggestion in the results div.
        $( "#tags" ).autocomplete({
            source: availableTags,
            suggest: function( items ) {
                var $div = $( ".results" ).empty();
                $.each(...