Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

navaneetpujar commented Aug 22, 2017

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

mhamzas commented Dec 28, 2017

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

@fgalimberti

This comment has been minimized.

Copy link

fgalimberti commented Feb 12, 2018

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

This comment has been minimized.

Copy link

tejdeep123 commented Jul 25, 2018

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
You can’t perform that action at this time.