Question

HI i am using the below code for population my autocomplete list.

    $('#input').autocomplete({ ajax_get : get_roles});

    function get_roles(v,cont,roleName){
            var roleName = roleName.value;
            roleName = roleName.toLowerCase();
            $.get('/da/roleautocomplete?roleName='+escape(roleName),{q:v},
                function(obj){
                  var res = [];
                  for(var i=0;i<obj.length;i++){
                    res.push({ id:i , value:obj[i]});
                  }
                  cont(res);
                },
                'json')
        }

I want to fire an event on the click or selection of an item from the autocomplete list. I have tried this –

$('#input').autocomplete({
     select:function(event, ui){
          // do your things here
      }, etc.

but to no avail. Can anyone please help me out with this?

Answer 1

I had a similar problem when first trying to use select:function(event,ui){ ... }, but it is definitely the way to go.

The key is to use ui.item to get ahold of the option that was clicked or otherwise selected. I had originally been using event then this, but those are different for clicks vs key select (take a look with console.log for some perspective), so ui.item is what you want. The autocomplete will be setting label: ..., value: ..., so most likely what you’ll use are ui.item.label and ui.item.value.