Skip to content

Instantly share code, notes, and snippets.

@peterknolle
Last active December 29, 2022 17:11
Show Gist options
  • Save peterknolle/ef17727d994332a8ef6b to your computer and use it in GitHub Desktop.
Save peterknolle/ef17727d994332a8ef6b to your computer and use it in GitHub Desktop.
Lightning Autocomplete Component
<aura:component controller="paura.AutocompleteController">
<aura:attribute name="sObjectType" required="true" type="String" description="Name of the sObject that will be filtered" />
<aura:attribute name="fields" type="String[]" default="" description="List of fields to get with each record"/>
<aura:attribute name="limit" type="Integer" default="10" description="Limits the number of sObjects returned to this value" />
<aura:attribute name="inputLabel" type="String" default="Find" description="Label for text input"/>
<aura:attribute name="ready" type="Boolean" default="false" description="Used to check if resources have been loaded"/>
<aura:registerEvent name="autocompleteEvent" type="paura:autocompleteEvt"/>
<!-- see https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB000000011BX -->
<paura:requires
baseUrl="/resource/"
scripts="{jquery:'jquery/jquery.js',jqueryui:'jqueryui/jquery-ui.js'}"
deps="{jqueryui:['jquery']}"
styles="{jqueryui:'jqueryui/jquery-ui.css'}"
requiresReady="c.init"
/>
<div>
<label>{!v.inputLabel}: </label>
<input class="autocomplete" type="text" />
</div>
</aura:component>
public class AutocompleteController {
@AuraEnabled
public static List<sObject> getSuggestions(String sObjectType, String term, String fieldsToGet, Integer limitSize) {
// could add in logic to remove possible duplicate fields
String fields = fieldsToGet.length() > 0 ? ',' + fieldsToGet : '';
String soql =
' SELECT Name, Id ' + String.escapeSingleQuotes(fields) +
' FROM ' + String.escapeSingleQuotes(sObjectType) +
' WHERE Name Like \'' + String.escapeSingleQuotes(term) + '%\'' +
' LIMIT ' + limitSize;
return Database.query(soql);
}
}
({
init: function(component, event, helper) {
if (typeof jQuery !== "undefined" && typeof $j === "undefined") {
$j = jQuery.noConflict(true);;
}
component.set("v.ready", true);
helper.initHandlers(component);
}
})
<aura:event type="COMPONENT">
<aura:attribute name="selectedOption" type="Object"/>
</aura:event>
({
initHandlers: function(component) {
var ready = component.get("v.ready");
if (ready === false) {
return;
}
var ctx = component.getElement();
$j(".autocomplete", ctx).autocomplete({
minLength: 2,
delay: 500,
source: function(request, response) {
var action = component.get("c.getSuggestions");
var fieldsToGet = component.get("v.fields");
action.setParams({
"sObjectType": component.get("v.sObjectType"),
"term": request.term,
"fieldsToGet": fieldsToGet.join(),
"limitSize": component.get("v.limit")
});
action.setCallback(this, function(a) {
var suggestions = a.getReturnValue();
suggestions.forEach(function(s) {
s["label"] = s.Name,
s["value"] = s.Id
});
response(suggestions);
});
$A.run(function() {
$A.enqueueAction(action);
});
},
select: function(event, ui) {
event.preventDefault();
var ctx = component.getElement();
$j(".autocomplete", ctx).val(ui.item.label);
var selectionEvent = component.getEvent("autocompleteEvent");
selectionEvent.setParams({
selectedOption: ui.item
});
selectionEvent.fire();
}
});
}
})
({
afterRender : function(component, helper) {
this.superAfterRender();
helper.initHandlers(component);
}
})
<aura:application>
<paura:autocomplete sObjectType="Account" autocompleteEvent="{!c.handleAutocomplete}" fields="Phone,AccountNumber" />
<paura:autocomplete sObjectType="Contact" autocompleteEvent="{!c.handleAutocomplete}" fields="Email,Phone"/>
<div id="result"></div>
</aura:application>
({
handleAutocomplete : function(component, event, helper) {
var so = event.getParam("selectedOption");
document.getElementById("result").innerHTML = 'Selected:' + so.Name;
}
})
@navaneetpujar
Copy link

image

Hi Peter,

Can you provide the library files to be added into the Resource folder.
Can you also let me know about this tag --> paura:requires , till now i came across ltng:require tag. I am a newbie to Lightning, your help on this would be appreciated :)

@Anumeet
Copy link

Anumeet commented Aug 28, 2017

I have this same question @peterknolle, can you please provide answer to this query? It is not letting us save the Component.
Thanks in advance !!

@mhamzas
Copy link

mhamzas commented Dec 28, 2017

@Anumeet & @navaneetpujar , you can get jQueryUI from https://jqueryui.com

@fgalimberti
Copy link

Hi mhamzas, I don't understand how to include the jquery/jquery-ui libreries, in your example you use paura:requires but it's not a standard tag? I also tried to install https://login.salesforce.com/packaging/installPackage.apexp?p0=04tB000000011BX but it fails.
Importing libraries with standard ltng:require the afterScriptsLoaded doesn't fire. Can you help me?
Many thanks
Francesco

@tejdeep123
Copy link

I can't able to install packages.it throws an error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment