jquery autocomplete get selected item text

Question

I am wondering how to grab the selected item's text value on jquery autocomplete.

I have initialised jquery as following :

$(document).ready(function (){
    $("input#autocomplete").autocomplete({
        source: postcodelist,
        select: function (event, ui) {
            AutoCompleteSelectHandler(event, ui)
        }
    });
});

And I have created a function function AutoCompleteSelectHandler(event, ui) { }.

Inside this function I want to some extra handling to feed data into correct textboxes but I can't figure out how to grab the text value of the selected item.

I did google a bit and tried examples but I can't seem to get it working.

Any help will be much appreciated.

Thanks a lot advance.

If you post the html markup and exactly what you need to do we could help — Nicola Peluchetti
– Nicola Peluchetti, Commented Jun 21, 2011 at 8:21

GeertvdC · Accepted Answer · 2011-06-21 08:29:14Z

31

The ui parameter has an item property with the selected text

function AutoCompleteSelectHandler(event, ui)
{               
    var selectedObj = ui.item;              
    alert(selectedObj.value);
}

source: http://jqueryui.com/demos/autocomplete/#event-select go to tab "Events" and then event "Select"

edited Jun 21, 2011 at 8:29

answered Jun 21, 2011 at 8:24

GeertvdC

2,9562 gold badges23 silver badges26 bronze badges

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

1 Comment

Oliver Dixon Over a year ago

What would be the full implementation of this?

onhundper · Accepted Answer · 2011-11-20 01:45:58Z

15

// list of clients
        $( "#client" ).autocomplete({
        source: "lib/getClientList.php",
        minLength: 2,
        select: function(event, ui) {
            alert(ui.item.value);
             }
        })

;

The ui.item.value is the reference that jquery utilizes to assign a value to the input

answered Nov 20, 2011 at 1:45

onhundper

1511 silver badge2 bronze badges

1 Comment

FrenkyB Over a year ago

Is it possible to get index of selected item?

jAndy · Accepted Answer · 2011-06-21 08:26:44Z

4

You don't need to apply an anonymous function as a wrap, you can directly pass the function ref.

$(document).ready(function (){
   $("input#autocomplete").autocomplete({
        source: postcodelist,
        select: AutoCompleteSelectHandler
    });
});

Within that method, you can either access this or event.target to get the current value, both values are referencing the input element:

function AutoCompleteSelectHandler(event, ui) {
    alert( $(event.target).val() );
    alert( $(this).val() );

    // alert( this.value );
}

answered Jun 21, 2011 at 8:26

jAndy

237k57 gold badges313 silver badges363 bronze badges

2 Comments

GeertvdC Over a year ago

why not just get it from the ui parameter that is passed into the method like in my answer as written in jquery ui's documentation?

rlee923 Over a year ago

aww I didn't know that you don't have to specify parameter. Thanks for the tip!

kinakuta · Accepted Answer · 2011-06-21 08:23:44Z

2

You just grab the value from the input in the same way you would if the user had typed it in themself:

$('input#autocomplete').val()

answered Jun 21, 2011 at 8:23

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

2 Comments

rlee923 Over a year ago

This will give you what the user typed, not the selected value.

kinakuta Over a year ago

Maybe I misunderstood your question? I thought you were looking for the option the user selected with autocomplete. Once they select, it puts it in the input and it's retrievable in the same way as if the user typed it.

Collectives™ on Stack Overflow

jquery autocomplete get selected item text

4 Answers 4

1 Comment

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related