You need to sign in to do that
Don't have an account?
d.tejdeep@nicomatic.in
controller JS:
I am converting my old visualforce component to lightning component :
visualforce component
Could someone help on this?
Thanks in advance
visualforce component to lightning component is not working properly autocomplete ?
<aura:component controller="autoCompleteController"> <!-- <ltng:require scripts="{!join(',', $Resource.jquery224 + '/jquery-2.2.4.min.js', $Resource.JqueryA + '/jquery-ui-1.8.16.custom.min.js')}" afterScriptsLoaded="{!c.doInit}" /> --> <ltng:require scripts='/resource/jquery224.js' afterScriptsLoaded="{!c.doInit}"/> <aura:attribute name="objectname" description="The object name you want to look for." type="String" required="true" /> <aura:attribute name="additionalfield" description="Any additional fields you'd like to search and include in the display." type="String" required="false"/> <aura:attribute name="autocomplete_textbox" description="The ID for the Autocomplete List Textbox." type="String" required="true"/> </aura:component>
controller JS:
({ doInit : function(component, event, helper) { var j$ = jQuery.noConflict(); j$(document).ready(function() { var sObjects; var queryTerm; j$(esc('{v.autocomplete_textbox}')).autocomplete({ minLength: 4, source: function(request, response) { queryTerm = request.term; autoCompleteController.findSObjects("{v.objectname}", request.term, "{v.additionalfield}", function(result, event){ if(event.type == 'exception') { alert(event.message); } else { sObjects = result; response(sObjects); } }); }, focus: function( event, ui ) { j$(esc('{v.autocomplete_textbox}')).val( ui.item.NicoPinFrace__c ); return false; }, select: function( event, ui ) { j$(esc('{v.autocomplete_textbox}')).val( ui.item.NicoPinFrace__c ); j$(esc('{v.autocomplete_textbox}_lkid')).val( ui.item.Id ); j$(esc('{v.autocomplete_textbox}_lkold')).val( ui.item.NicoPinFrace__c ); return false; }, }) .data( "autocomplete" )._renderItem = function( ul, item ) { var entry = "<a>" + item.NicoPinFrace__c + "</a>"; entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>"); return j$( "<li></li>" ) .data( "item.autocomplete", item ) .append( entry ) .appendTo( ul ); }; }); function esc(myid) { return '#' + myid.replace(/(:|\.)/g,'\\\\$1'); } } })apex class :
global class autoCompleteController { @RemoteAction @auraenabled global static SObject[] findSObjects(string obj, string qry, string addFields) { // more than one field can be passed in the addFields parameter // split it into an array for later use List<String> fieldList; if (addFields != null) fieldList = addFields.split(','); // check to see if the object passed is valid Map<String, Schema.SObjectType> gd = Schema.getGlobalDescribe(); Schema.SObjectType sot = gd.get(obj); if (sot == null) { // Object name not valid return null; } // create the filter text String filter = ' like \'%' + String.escapeSingleQuotes(qry) + '%\''; //begin building the dynamic soql query String soql = 'select id , Name '; // if an additional field was passed in add it to the soql if (fieldList != null) { for (String s : fieldList) { soql += ', ' + s; } } // add the object and filter by name to the soql soql += ' from ' + obj + ' where NicoPinFrace__c' + filter; // add the filter by additional fields to the soql if (fieldList != null) { for (String s : fieldList) { soql += ' or ' + s + filter; } } soql += ' order by NicoPinFrace__c limit 20'; List<sObject> L = new List<sObject>(); try { L = Database.query(soql); } catch (QueryException e) { return null; } return L; } }compoenent
<aura:component > <ui:inputtext aura:id="memNam"> <c:autoComplete2 autocomplete_textbox="{!$Component.memNam}" additionalfield="NicoPinFrace__c" objectname="NicoPinCodeFrance__c" /> </ui:inputtext> </aura:component>
I am converting my old visualforce component to lightning component :
visualforce component
<apex:component controller="autoCompleteController"> <!-- JQuery Files --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"/> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"/> <apex:stylesheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/ui-smoothness/jquery-ui.css"/> <!-- Attributes Required For Component --> <apex:attribute name="objectname" description="The object name you want to look for." type="String" required="true"/> <apex:attribute name="additionalfield" description="Any additional fields you'd like to search and include in the display." type="String" required="false"/> <apex:attribute name="autocomplete_textbox" description="The ID for the Autocomplete List Textbox." type="String" required="true"/> <style> .ui-autocomplete-loading { background: white url({!$Resource.circleIndicator}) right center no-repeat; } </style> <script type="text/javascript"> var j$ = jQuery.noConflict(); j$(document).ready(function() { var sObjects; var queryTerm; j$(esc('{!autocomplete_textbox}')).autocomplete({ minLength: 4, source: function(request, response) { queryTerm = request.term; autoCompleteController.findSObjects("{!objectname}", request.term, "{!additionalfield}", function(result, event){ if(event.type == 'exception') { alert(event.message); } else { sObjects = result; response(sObjects); } }); }, focus: function( event, ui ) { j$(esc('{!autocomplete_textbox}')).val( ui.item.NicoPinFrace__c ); return false; }, select: function( event, ui ) { j$(esc('{!autocomplete_textbox}')).val( ui.item.NicoPinFrace__c ); j$(esc('{!autocomplete_textbox}_lkid')).val( ui.item.Id ); j$(esc('{!autocomplete_textbox}_lkold')).val( ui.item.NicoPinFrace__c ); return false; }, }) .data( "autocomplete" )._renderItem = function( ul, item ) { var entry = "<a>" + item.NicoPinFrace__c + "</a>"; entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>"); return j$( "<li></li>" ) .data( "item.autocomplete", item ) .append( entry ) .appendTo( ul ); }; }); function esc(myid) { return '#' + myid.replace(/(:|\.)/g,'\\\\$1'); } </script> </apex:component>
Could someone help on this?
Thanks in advance