Question

I have a form with many inputs, all of them with the class “field”. On my JavaScript file, I have something like this:

$(".field").autocomplete({
    source:"search.php",
    select:function(event,ui){$(???).doStuff();}
    });

What I need is some way to refer to the input field where the user is writing (that is, some selector in place of the “???”), so that I can do some stuff with the surrounding elements. I am guessing that the answer is something like “ui.field”, “ui.input” or “ui.element”, but I tried those and others with no luck, and I couldn’t find the answer in the documentation nor here, so I turn to you. Thanks!

Answer 1

It’s this (that’s the raw element, not wrapped), as with most jQuery events. This could be documented better. 🙂 So in your case:

$(".field").autocomplete({
    source:"search.php",
    select:function(event,ui){
        // Here, `this` is the raw DOM element of the field
        $(this).doStuff();
    }
});

Example (live copy):

HTML:

<p>Type a <kbd>t</kbd> then pick a choice. The field will turn green briefly.</p>
<input class="ac" type="text">
<input class="ac" type="text">
<input class="ac" type="text">

JavaScript:

jQuery(function($) {
  $(".ac").autocomplete({
    source: ["two", "three", "thirty"],
    select: function(event, ui) {
      var $this = $(this);
      $this.css("color", "green");
      setTimeout(function() {
        $this.css("color", "");
      }, 500);
    }
  });
});