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.

 

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.