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; | |
} | |
}) |
This comment has been minimized.
This comment has been minimized.
I have this same question @peterknolle, can you please provide answer to this query? It is not letting us save the Component. |
This comment has been minimized.
This comment has been minimized.
@Anumeet & @navaneetpujar , you can get jQueryUI from https://jqueryui.com |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
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 :)