JQuery AutoComplete event on selection

Question

I'm using the AutoComplete to select from an option list which contains numeric id's for the option values and names for the values.

The AutoComplete/combox works just fine, but how do I capture the select event? When a selection is made from the list I want to use the value to update other elements of the DOM.

I've searched around and found the documentation on the AutoComplete: https://api.jqueryui.com/autocomplete/#event-change

I've tried:

    if ( typeof $("#uid").autocomplete == "function" ) {
            $("#uid").on("autocompleteselect", function( event, ui ) {
                    alert("HERE");    
            });
    }

HTML:

    <p class="dlgline">
    <label for="uid">Select user:</label><br>
    <select id="uid" name="uid" style="display: none;"><option id="0"></option>
    <option value="3">Name 1</option>
    <option value="1">Another Name</option>
    <option value="2">And Another</option>
    </select>
    <span class="custom-combobox"><input title="" class="custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-autocomplete-input" autocomplete="off"><a tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-right" role="button"><span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text"></span></a></span>

The Javascript:

    $.widget( "custom.combobox", {
    _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>" )
            .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( event, ui ) {
                ui.item.option.selected = true;
                this._trigger( "select", event, {
                    item: ui.item.option
                });
            },

            autocompletechange: "_removeIfInvalid"
        });
    },

    _createShowAllButton: function() {
        var input = this.input,
            wasOpen = false;

        $( "<a>" )
            .attr( "tabIndex", -1 )
            .attr( "title", "Show All Items" )
            .tooltip()
            .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( event, 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", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
    },

    _destroy: function() {
        this.wrapper.remove();
        this.element.show();
    }
});

Before the dialog is displayed and after the content has been populated:

    $("#uid").combobox();

JSFiddle:

http://jsfiddle.net/SimonPlatten/wLxdjorp/3/

This is the original code I based mine on:

https://jqueryui.com/resources/demos/autocomplete/combobox.html

Please add your html and jquery code here, it will be more easy for us to help you — furcicm
– furcicm, Commented Dec 9, 2015 at 9:28

madalinivascu · Accepted Answer · 2015-12-09 09:28:49Z

1

Try jquery ui's select event:

https://api.jqueryui.com/autocomplete/#event-select

answered Dec 9, 2015 at 9:28

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SPlatten Over a year ago

Are the code examples shown two ways of achieving the same thing, as I've tried these and whilst I can see in Firebug that the 'autocompleteselect' method is triggered, it doesn't call my callback.

madalinivascu Over a year ago

what callback function?

SPlatten Over a year ago

Thank you for the example, however my code is pasted above and is very different.

Akash Kadia · Accepted Answer · 2015-12-09 11:20:12Z

1

use

 $( ".selector" ).autocomplete({
        select:function(value, data) {
        //your selection code goes here
        }
});

answered Dec 9, 2015 at 11:20

Akash Kadia

1132 silver badges11 bronze badges

Comments

SPlatten · Accepted Answer · 2015-12-09 10:53:14Z

0

I modified the member function:

        this._on( this.input, {
            autocompleteselect: function( event, ui ) {
                ui.item.option.selected = true;
                this._trigger( "select", event, {
                    item: ui.item.option
                });
                if ( objPeople && objPeople[ui.item.value] ) {
        var objUser = objPeople[ui.item.value];
        alert("HERE");            
      }
            },
            autocompletechange: "_removeIfInvalid"
        });

And this works.

answered Dec 9, 2015 at 10:53

SPlatten

5,86113 gold badges79 silver badges140 bronze badges

Collectives™ on Stack Overflow

JQuery AutoComplete event on selection

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related