CODEWITHSUNDEEP
javascriptjqueryautocomplete
rlee923
rlee923

Reputation: 778

jquery autocomplete get selected item text

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.

Upvotes: 18

Views: 52219

Answers (4)

onhundper
onhundper

Reputation: 151

// 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

Upvotes: 15

GeertvdC
GeertvdC

Reputation: 2918

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"

Upvotes: 31

jAndy
jAndy

Reputation: 236162

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 );
}

Upvotes: 4

kinakuta
kinakuta

Reputation: 9037

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()

Upvotes: 2

Related Questions