{{!--
--}}

Markup

{{#aljs-pre-container type="html"}}
{{!--
--}} {{/aljs-pre-container}} {{!--

This table gives you a quick overview of SLDS-specific markup being read by the plugin.

ALJS Markup Outcome Required Applied to Comments
data-select="single/multi" Sets the lookup to allow a single selection or multiple selections Required .slds-lookup
data-scope="single/multi" Sets the lookup scope to a single object or multiple objects Required .slds-lookup Multi Scope is currently in development
--}}

Initialize with Options

{{#aljs-pre-container type="js"}} $(document).ready(function() { $('#lookup-01').lookup({ items: [ { id: 'result-1', label: 'Result 1', metaLabel: 'Optional meta description' }, { id: 'result-2', label: 'Result 2', metaLabel: 'Optional meta description' }, { id: 'result-3', label: 'Result 3', metaLabel: 'Optional meta description' }, { id: 'result-4', label: 'Result 4', metaLabel: 'Optional meta description' }, showSearch: true, recentLabel: '' ], }); var resultsForSecondLookup = [ { id: 'ajax-result-1', label: 'AJAX Result 1', metaLabel: 'Optional meta description' }, { id: 'ajax-result-2', label: 'AJAX Result 2', metaLabel: 'Optional meta description' }, { id: 'ajax-result-3', label: 'AJAX Result 3', metaLabel: 'Optional meta description' }, { id: 'ajax-result-4', label: 'AJAX Result 4', metaLabel: 'Optional meta description' } ]; $('#lookup-02').lookup({ items: resultsForSecondLookup, objectPluralLabel: 'Things', objectLabel: 'Thing', useImgTag: false, objectIconUrl: '/assets/icons/standard-sprite/svg/symbols.svg#account', objectIconClass: 'slds-icon-standard-account', initialSelection: { id: 'ajax-result-1', label: 'AJAX Result 1' }, onClickNew: function() { console.log('redirect or run something'); } });{{!-- $('#lookup-03').lookup({ objectPluralLabel: 'Entities', objectLabel: 'Entity', objectIconUrl: '/assets/icons/standard-sprite/svg/symbols.svg#account', objectIconClass: 'slds-icon-standard-account', emptySearchTermQuery: function(callback) { callback(results); }, filledSearchTermQuery: function(searchTerm, callback) { callback(results.filter(function(result) { return result.label.match(searchTerm) !== null; })); }, clickAddFunction: function() { console.log('redirect or run something'); } });--}} }); {{/aljs-pre-container}}

This table details the options available for the jQuery function.

Option Behavior Values Default value
items Populates the list of lookup items; used as a static list (see emptySearchTermQuery and filledSearchTermQuery for dynamic results) An array of objects with id (required unique string), label (required string), and metaLabel (optional string) properties []
objectLabel Sets the singular label for the searchable object Any string 'Object'
objectPluralLabel Sets the plural label for the searchable object Any string 'Objects'
recentLabel Sets the label for the recent items header that appears on the dropdown when a search hasn't been performed Any string; use '' (empty string) to exclude the header 'Recent Objects'
useImgTag Adjusts the generated markup accept images with transparent backgrounds for object icons true, false false
objectIconUrl Sets the icon of the searchable object Any string representing an icon URL; use '' (empty string) to exclude icons '/assets/icons/standard-sprite/svg/symbols.svg#account'
objectIconClass Sets the icon background color of the searchable object Any string representing an icon class (see https://www.lightningdesignsystem.com/components/icons for more details) 'slds-icon-standard-account'
emptySearchTermQuery A function that runs callback, which passes an array of results, when an empty search (initial focus) is performed; only used when items is empty function(callback) { callback([{id: 1, label: 'One'}]); }) function () { callback([]); }
filledSearchTermQuery A function that runs callback, which passes an array of results, when a filled search is performed; only used when items is empty function(searchTerm, callback) { callback([{id: 1, label: 'One'}]); }) function (searchTerm, callback) { callback([]); }
initialSelection An object or array of objects that the lookup will initially have selected Either a valid search result object or an array of result objects null
onClickNew A function that runs when a user clicks the "New" link in the dropdown Any callback function null
onChange A function that runs when a user selects a search result or clears a selection. Any callback function, which can receive two parameters — currentSelection: the current item object that is passed in, and isAdd: a boolean that is true on addition of a selection and false on removal function(currentSelection, isAdd) {}
showSearch Determines whether the search prompt appears when a user has typed in search term text true or false false
searchDelay Determines the delay (in milliseconds) following user input before a filtered items list is displayed Any number 500

Methods

{{#aljs-pre-container type="js"}} $('#lookup-01').lookup('getSelection'); $('#lookup-01').lookup('setSelection', { id: 1, label: 'item1'}); $('#lookup-01').lookup('setSelection', [{ id: 1, label: 'item1'}, { id: 2, label: 'item2'}]); {{/aljs-pre-container}}

This table details the methods available for the jQuery function.

Method jQuery object Parameters Outcome
getSelection The target lookup None The object that is selected is returned
setSelection The target lookup A valid search result object with id (required unique string) and label (required string) properties The lookup is set to the passed in selection(s)
{{!--
--}}