Trigger event once dropdown item is selected on jQuery combobox

Question

I'm using the autocomplete combobox from the jQuery UI library to create a couple text fields that also accept dropdowns -- basically a hybrid text/dropdown input. I customized it though so it also accepts free text input, not just items in the dropdown array.

When the user selects an item from the dropdown, I'd like to trigger a function that populates the rest of the form based on the input. I don't want this function to trigger when the user types in a value manually. I'm not sure though how to bind an event specifically to the user selecting an item from the dropdown.

Here's a Fiddle: http://jsfiddle.net/AhDHk/

HTML:

    <input type="text" name="realtor-name" id="lp-realtor-name" value="" class="text ui-widget-content ui-corner-all" />

JS:

// adds the dropdown, dropArray is the list of items for the dropdown, id is the ID of the html input. 

function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
    source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
    minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");


$("<button type='button'>&nbsp;</button>")                     
    .attr("tabIndex", -1)                     
    .attr("title", "Show All Items")                     
    .insertAfter($input)                     
    .button({                         
        icons: {                             
            primary: "ui-icon-triangle-1-s"                         
        },                         
        text: false                     
    })                     
    .removeClass("ui-corner-all")                     
    .addClass("ui-corner-right ui-button-icon lp-drop-button")   
    .click(function() {                         
        // close if already visible                         
        if ($input.autocomplete("widget").is(":visible")) { 
             $input.autocomplete( "close" );
             return;                         
        }                                              
        $(this).blur();                                                 
        $input.autocomplete("search", "" );                         
        $input.focus();                     
    });

$("form").submit(function(e) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    alert($(this).serialize());
});
}

Jsfiddle example would be more helpful.

Bhavesh B
– Bhavesh B

2013-10-15 17:52:41 +00:00
Commented Oct 15, 2013 at 17:52 — Bhavesh B
– Bhavesh B, Commented Oct 15, 2013 at 17:52
Good point: jsfiddle.net/AhDHk

Ben Davidow
– Ben Davidow

2013-10-15 18:01:50 +00:00
Commented Oct 15, 2013 at 18:01 — Ben Davidow
– Ben Davidow, Commented Oct 15, 2013 at 18:01

Community · Accepted Answer · 2017-05-23 12:21:08Z

3

+50

Here is how you can handle it:

var $input = $(id).autocomplete({
    source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
    minLength: 0,
    select: function(event, ui) { alert('test');}
}).addClass("ui-widget ui-widget-content ui-corner-left");

Possible duplicate of: jQuery UI Autocompleteselect

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 15, 2013 at 18:20

Francis

3671 silver badge10 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:10:57Z

1

The select event, here.

function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
    source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
    minLength: 0,
    select:function(a,b){
          alert(b.item.value + 'selected');
    }
}).addClass("ui-widget ui-widget-content ui-corner-left");

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Oct 15, 2013 at 18:24

KnowHowSolutions

6803 silver badges10 bronze badges

Collectives™ on Stack Overflow

Trigger event once dropdown item is selected on jQuery combobox

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related