Lightning Autocomplete Component

autccomplete.cmp

<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>

AutocompleteController.cls

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);
    }
}

autocompleteController.js

({
    
    init: function(component, event, helper) {       
        if (typeof jQuery !== "undefined" && typeof $j === "undefined") {
            $j = jQuery.noConflict(true);;
        }        
        
       	component.set("v.ready", true);
       	helper.initHandlers(component);
    }
    
})

autocompleteEvt.evt

<aura:event type="COMPONENT">
	<aura:attribute name="selectedOption" type="Object"/>
</aura:event>

autocompleteHelper.js

({  
    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();
            }
        });
    }

})

autocompleteRenderer.js

({
    
	afterRender : function(component, helper) {
	    this.superAfterRender();
            helper.initHandlers(component);
	}
})

widgets.app

<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>

widgetsController.js

({
    handleAutocomplete : function(component, event, helper) {
        var so = event.getParam("selectedOption");
        document.getElementById("result").innerHTML = 'Selected:' + so.Name;
    }
})

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 :)

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 !!

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

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

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