You need to sign in to do that
Don't have an account?
Sys Admin 63
ui:inputSelect not working with jquery UI autocomplete when Locker service enabled
I have a scenerio where jquery ui's autocomplete functionlity doesn't work. It does not generate combo box for autocomplete. Is there any compatibility issue? Please have a look into code and help with the issue
Component Markup
Thanks in advance.
Component Markup
<aura:component > <ltng:require styles="/resource/slds0120/assets/styles/salesforce-lightning-design-system.css" /> <ltng:require styles="/resource/jsAssets/jquery-ui.min.css" scripts="/resource/jsAssets/jquery.js,/resource/JqueryUINew/jquery-ui.min.js" afterScriptsLoaded="{!c.documentReady}" /> <button type="button" title="Add Organization" aria-haspopup="true" class="slds-button slds-button--icon-border-filled slds-button--icon-small custom-add"><span class="slds-icon__container slds-icon-utility-add"> <c:adminifiedIcons class="slds-button__icon slds-icon--x-small" svgPath="/resource/SLDS0120/assets/icons/utility-sprite/svg/symbols.svg#add" /> <span class="slds-assistive-text"> </span> </span> </button> <span class="ss"></span> <input type="text" id="topic_title" class="select-org"/> <ui:inputSelect aura:id="org_drop_down" class="selOrg select-org"> </aura:component>Controller js code
({ documentReady : function(component, event, helper) { /* globals $ */ var availableTags = ["ActionScript","AppleScript","Asp","BASIC"]; $( ".select-org" ).autocomplete({ source: availableTags, }); $.widget( "custom.combobox1", { _create: function() { this.wrapper = $( "<span>" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() : ""; this.input = $( "<input autofocus class='slds-input slds-input--small' placeholder='Organization'>" ) .appendTo( this.wrapper ) .val( value ) .attr( "title", "" ) .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left") .autocomplete({ delay: 0, minLength: 0, source: $.proxy( this, "_source" ) }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on( this.input, { autocompleteselect: function( e, ui ) { ui.item.option.selected = true; this._trigger( "select", e, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $( "<a>" ) .attr( "tabIndex", -1 ) .appendTo( this.wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "custom-combobox-toggle ui-corner-right" ) .mousedown(function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); }) .click(function() { input.focus(); // Close if already visible if ( wasOpen ) { return; } // Pass empty string as value to search for, displaying all results input.autocomplete( "search", "" ); }); }, _source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( this.element.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text, value: text, option: this }; }) ); }, _removeIfInvalid: function( e, ui ) { // Selected an item, nothing to do if ( ui.item ) { return; } // Search for a match (case-insensitive) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // Found a match, nothing to do if ( valid ) { return; } // Remove invalid value this.input .val( "" ) .attr( "title", value + " didn't match any item" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 1500 ); this.input.autocomplete( "instance" ).term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); var opts = []; opts.push({ class: "optionClass", label: "shankar", value: "shankar" }); opts.push({ class: "optionClass", label: "singh", value: "singh" }); //component.find("org_drop_down").set("v.options", opts); $('.select-org').combobox1({ source: opts, }); } })
Thanks in advance.
I tried implementing the component, let me is this what are trying to achieve..
I am using Jquery version 2.2.4 compatible locker service enabled.
I hope this helps.
Thanks
Arshad
I am also using jquery 2.2.4 and it works fine but we are also using jquery UI's js to accomplish autocomplete functionality using <ui:inputSelect aura:id="org_drop_down" class="selOrg select-org"> instead of simple html input tag and it's not working.
When we run code autocomplete does not work. Is there any issue with jquery ui library?
Thanks
Lokesh
For your scenario, have a look into the following jQuery plugin.
https://harvesthq.github.io/chosen/
I hope this helps you.
Thanks
Arshad
Thanks for the sharing jquery plugin. We will try it but yes it may require logic change in few places. We will have to access how much change is required.
Did you try this plugin with Locker service enabled?
Thanks