auto complete jQuery with 2 input

Question

I have the following autocomplete that works in the first input, when completing it fills in the 2nd input.

The problem is that if I delete the tag <p> it doesn’t work. Someone can tell me why?

Follows the code:

$().ready(function() {

  $("#singleBirdRemote").autocomplete("search.php", {
    width: 260,
    selectFirst: false
  });

  $("#singleBirdRemote").result(function(event, data) {
    if (data)
      $(this).parent().next().find("#xx").val(data[0]);
  });

});

<p>
  <input type="text" id="singleBirdRemote">
</p>
<p>
  <input name="asdad" id="xx">
</p>

Answer 1

I believe this occurs because you retrieve the reference of the second input in a relative way by traversing the DOM tree.

I mean, you’re based on #singleBirdRemote, search for the father p, navigate to the next element and search for input xx. When remove p you break that hierarchy.

 $(this).parent().next().find("#xx").val(data[0]);

You can simply replace the

 $("#xx").val(data[0]);

I believe that alone will help.

Be careful when browsing relative mode, any changes in the code may cause you problems. The ideal is to have precise references, by id, name or class, depending on the need.