Skip to content

Instantly share code, notes, and snippets.

@sfdcale
Last active June 25, 2017 15:51
Show Gist options
  • Select an option

  • Save sfdcale/32cbdd081a729f7b8007536680ef1411 to your computer and use it in GitHub Desktop.

Select an option

Save sfdcale/32cbdd081a729f7b8007536680ef1411 to your computer and use it in GitHub Desktop.
Lightning Assistive search explained in this article (http://www.jitendrazaa.com/blog/salesforce/lightning-component-for-wikipedia-search/) updated for account search
<aura:component controller="AccSearchController" implements="force:appHostable,flexipage:availableForAllPageTypes">
<aura:attribute name="accSearchText" type="String"/>
<aura:attribute name="resultLimit" type="Integer" default="4"/>
<div class="slds-card">
<div class="slds-card__header slds-grid">
<div class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__figure">
<lightning:icon iconName="custom:custom68"></lightning:icon>
</div>
<div class="slds-media__body">
<h2 class="slds-text-heading--small slds-truncate">Account Search</h2>
</div>
</div>
</div>
<div class="slds-card__body slds-box slds-theme--default">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size--10-of-12">
<ui:inputText value="{!v.accSearchText}" placeholder="Hit enter button to search" class="slds-input" keyup="{!c.searchAccs}"/>
</div>
<div class="slds-col slds-size--2-of-12">
<button class="slds-m-left--small slds-button slds-button--icon-border-filled slds-button--icon-small" onclick="{!c.searchAccsOnButton}">
<lightning:icon iconName="utility:search"></lightning:icon>
<span class="slds-assistive-text">Settings</span>
</button>
</div>
<div class="slds-col slds-size--10-of-12 slds-p-top--large">
<ul id="resultPlaceHolder" class="slds-list--vertical slds-has-cards slds-has-inline-block-links--space">
<!-- This is placeholder to render Account Search results -->
</ul>
</div>
<div class="slds-col slds-size--2-of-12">
</div>
</div>
</div>
</div>
</aura:component>
<design:component>
<design:attribute name="resultLimit" label="Result Limit" description="Total number of results to display" />
</design:component>
public class AccSearchController {
@AuraEnabled
public static String searchAccounts(String searchText, Integer limitInt){
Integer limitInteger = Integer.valueOf(limitInt);
List<Account> accList = Database.query('SELECT Id,Name FROM Account WHERE Name LIKE ' + '\'%' + searchText + '%\'' + ' LIMIT ' + limitInteger);
return JSON.serialize(accList);
}
}
({
searchAccs : function(component, event, helper) {
if(event.getParams().keyCode == 13){
helper.accSearch(component.get('v.accSearchText'),component, helper);
}
},
searchAccsOnButton : function(component, event, helper){
helper.accSearch(component.get('v.accSearchText'),component, helper);
}
})
({
accSearch : function(txtToSearch , component, helper) {
var action = component.get('c.searchAccounts');
var resLimit = component.get('v.resultLimit');
action.setParams({
searchText : txtToSearch,
limitInt : resLimit
});
action.setCallback(this, function(a) {
if (a.getState() === 'SUCCESS') {
console.log(a.getReturnValue());
helper.parseResult(a.getReturnValue(),helper);
}
});
$A.enqueueAction(action);
},
parseResult : function(res,helper){
var retJSON = JSON.parse(res);
console.log(retJSON);
domSearch = document.getElementById('resultPlaceHolder');
while (domSearch.firstChild) {
domSearch.removeChild(domSearch.firstChild);
}
for(var i=0 ; i<retJSON.length ; i++)
{
helper.createChildNodes(domSearch, retJSON[i].Name,window.location.origin + '/'+ retJSON[i].Id);
}
},
createChildNodes : function(domSearch,title,url){
var res_li = document.createElement('li');
res_li.setAttribute('class', 'slds-list__item');
var link = document.createElement('a');
link.setAttribute('href', url);
link.innerText = title;
res_li.appendChild(link);
domSearch.appendChild(res_li);
}
})
<aura:application extends="force:slds">
<c:AccSearch></c:AccSearch>
</aura:application>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment