how to append selected input value to anoter div in Ajax AutoComplete for jQuery?

Question

hi i am using Ajax AutoComplete for jQuery library

http://www.devbridge.com/projects/autocomplete/jquery/

there are 2 demos there .

in the first demo (Ajax auto-suggest sample (start typing country name))

when you select a country from the drop down that country and a image is added to a div like this

<div id="selection"><img alt="" src="/global/flags/small/ht.png"> Haiti</div>

the selected dropdown value is Haiti how can i do this .

i want to do this when mouse clicking on drop-down value and also when press enter on selected drop-down value .

i tried but could not think a way ................. please help :(

Answer 1

In the autocomplete-parameters you can define an onSelect callback. Add the function to change the div with the id selection. E.g.:

$(>selector<).autocomplete({
    ...
    onSelect: function(value, data) {
        $('#selection').html('<img src="/global/flags/small/' + data + '.png" alt="" /> ' + value);
    }
    ...
});