-
-
Save RatanPaul/5d624edf9a50c197638ff8914ed44122 to your computer and use it in GitHub Desktop.
JQuery Autocomplete Plugin styled with Salesforce Lightning Design System (SLDS) in Visualforce
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment