JQuery Autocomplete Plugin styled with Salesforce Lightning Design System (SLDS) in Visualforce

gistfile1.txt

<apex:page >

    <!-- good ol' jquery! -->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>$j = jQuery.noConflict();</script>

    <!-- the infamous SLDS, aka my nemesis -->
    <apex:stylesheet value="{!URLFOR($Resource.SLDS0121,'assets/styles/salesforce-lightning-design-system-vf.css')}"/>

    <!-- font-awesome to the rescue because SLDS svg icon markup is way more work than I care to manage -->
    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <style>
        /*
         * Copied from SLDS a:hover for lookup items.
         * The autocomplete plugin adds this class to
         * elements the user is iterating through with
         * their keyboard but SLDS only styles mousehover.
         * It's easier to just define this style than it is
         * to hook into the jquery-ui menu widget to detect
         * all the events that would cause this class to be
         * added or removed and then try to apply an equivalent SLDS class.
         */
        .ui-state-focus {
            outline: 0;
            background-color: #f4f6f9;
            color: #16325c;
            text-decoration: none;
        }
    </style>

    <div class="slds">

        <p class="slds-text-heading--label slds-m-bottom--small">
            SLDS JQuery Autocomplete Plugin
        </p>

        <div class="slds-grid">

            <div class="slds-col slds-size--1-of-2">

                <div class="slds-lookup" data-select="single" data-scope="single" data-typeahead="true">

                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="lookup-input">Accounts</label>
                        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
                            <span class="slds-input__icon" aria-hidden="true">
                                <i class="fa fa-search"></i>
                            </span>
                            <div class="slds-pill__container slds-hide"></div>
                            <input id="lookup-input" class="slds-input slds-show" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" />
                        </div>
                    </div>

                </div>

            </div>

            <div class="slds-col slds-size--1-of-2">

            </div>

        </div>

    </div>

    <script>

        // https://learn.jquery.com/plugins/advanced-plugin-concepts/
        // http://learn.jquery.com/jquery-ui/widget-factory/

        (function( $ ) {

            $.widget( 'slds.autocomplete', $.ui.autocomplete, {

                _create: function() {

                    this._super();

                    this.sldsMenu = $('<div>')
                                        .addClass('slds-lookup__menu slds-hide')
                                        .attr('role', 'listbox')

                    this.element.parentsUntil('.slds-lookup').append( this.sldsMenu );

                    $('.ui-helper-hidden, .ui-helper-hidden-accessible').addClass('slds-hide');

                },

                _renderMenu: function( ul, items ) {

                    var self = this;

                    ul.addClass('slds-lookup__list').attr('role', 'presentation');
                    ul.appendTo( this.sldsMenu );

                    this.sldsMenu.addClass('slds-show').removeClass('slds-hide');

                    $.each( items, function( index, item ) {
                        self._renderItemData( ul, item );
                    });

                },

                _renderItem: function( ul, item ) {

                    return $('<li>')
                        .addClass('slds-lookup__item')
                        .append( '<a href="#" role="option">' + item.label + '</a>' )
                        .appendTo( ul );

                },

                _close: function( event ) {

                    this._super( event );

                    this.sldsMenu.addClass('slds-hide').removeClass('slds-show');

                }

            });

        })( jQuery );

        $j(function() {

            $j('#lookup-input').autocomplete({
                source: [
                    'Alligator', 'Anteater', 'Antelope', 'Angry Bird', 'Gorilla'
                ]
            });

        });

    </script>

</apex:page>

A proof of concept how to leverage jquery's widget factory to extend their existing (awesome) plugins to apply SLDS specific styling in a visualforce page. This accomplishment gives me hope that SLDS might be practical to developers one day since SLDS is not providing any JavaScript support as compared to jQuery-UI and Bootstrap.

If used in Lightning Components with LockerService enabled, any JS or CSS resources being referenced should come from Static Resources; they cannot be loaded directly from external web sites.

https://developer.salesforce.com/blogs/developer-relations/2016/04/introducing-lockerservice-lightning-components.html

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_code.htm