Last active
December 29, 2022 17:11
-
-
Save peterknolle/ef17727d994332a8ef6b to your computer and use it in GitHub Desktop.
Lightning Autocomplete Component
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
<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> |
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
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); | |
} | |
} |
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
({ | |
init: function(component, event, helper) { | |
if (typeof jQuery !== "undefined" && typeof $j === "undefined") { | |
$j = jQuery.noConflict(true);; | |
} | |
component.set("v.ready", true); | |
helper.initHandlers(component); | |
} | |
}) |
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
<aura:event type="COMPONENT"> | |
<aura:attribute name="selectedOption" type="Object"/> | |
</aura:event> |
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
({ | |
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(); | |
} | |
}); | |
} | |
}) |
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
({ | |
afterRender : function(component, helper) { | |
this.superAfterRender(); | |
helper.initHandlers(component); | |
} | |
}) |
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
<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> |
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
({ | |
handleAutocomplete : function(component, event, helper) { | |
var so = event.getParam("selectedOption"); | |
document.getElementById("result").innerHTML = 'Selected:' + so.Name; | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I can't able to install packages.it throws an error