How do you bind jQuery UI autocomplete using .on()?

Question

This question was answered for the live() method, but the live() method has been deprecated as of jQuery 1.7 and replaced with the .on() method and this answer does not work

Answer 1

This seems just to be some peculiarity of the interaction between .on() and autocomplete. If you want to do this:

$(function(){
  $('.search').live('keyup.autocomplete', function(){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});

This works with on():

$(function(){
  $(document).on("keydown.autocomplete",".search",function(e){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});

You can access the event.target.id of the element that the autocomplete was called on with the parameter of the on() callback function (e in the code above).

The difference is with on(), the event param in the internal events works differently, holding different values. With live(), the event.target.id in the select function will hold the ID of the selected input element. But with on(), the event.target.id in select will hold the ID of the list of autocomplete items (ui-active-menuitem). With on(), you can access the ID of the input element with event.target.id from the change and open functions.