function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sys Admin 63Sys 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
<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.

 
Sys Admin 63Sys Admin 63
Also when I change <ui:inputSelect aura:id="org_drop_down" class="selOrg select-org"> to <input type='text' id='org_drop_down' /> it works but I can clearly see performence issue, actually it does hang the screen.
Arshadulla.ShariffArshadulla.Shariff
Hello,
I tried implementing the component, let me is this what are trying to achieve..
User-added image
I am using Jquery version 2.2.4 compatible locker service enabled.
I hope this helps.
Thanks
Arshad
Sys Admin 63Sys Admin 63
Hi,

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
 
Arshadulla.ShariffArshadulla.Shariff
Hello Lokesh,

For your scenario, have a look into the following jQuery plugin.
https://harvesthq.github.io/chosen/

I hope this helps you.
Thanks
Arshad
Sys Admin 63Sys Admin 63
Hi,

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
vijendra raivijendra rai
I have one custom object and on this I have 2 mandatory fields Account Name and Contact Name. Both the fields have lookup relationship with Account and Contact Object respectively. And now I want to achieve Auto Complete on both the lookup fields. For second field which will be “ Contact name” , it will search the contact based on Account selected in Account field. How can I achieve this?  Please help.