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.

 

Hi All,

 

I want to create a output link  with some value and it needs to have an action method to control that link. That mean, according to the return value of action method, output link will be populate. How can  I do this?

 

Thanks in Advance!!

Hello everyone, just wanted to share with the community this custom component I made and give something back for the help I've received. :smileyhappy:

The purpose of the component is to enable autocomplete in lookup fields. I used the autocomplete js created by Jim Roos:
(http://www.jimroos.com/2007/05/ajax-autocomplete.html) but made some modifications to it so that it could interact with an Apex controller among some other things...

So my idea was that if you were making a VF page that had an inputfield that was related to a lookupfield you would just insert this autocomplete component to that inputfield. Something like this:

Jonathan.


Message Edited by jonathan rico on 08-16-2008 01:55 PM

Message Edited by jonathan rico on 08-17-2008 09:04 AM