jQuery Autocomplete result keeps spitting out error

Question

Hi, I've been struggling w/ this problem since yesterday, but I can't figure out why i keep getting error messages "... is not a function". Here's the HTML code

<td>
<input class="itemAC" name="Item[0][name]" id="Item_0_name" type="text" value="" />
<input class="itemId" name="TransactionDetail[0][itemId]" id="TransactionDetail_0_itemId" type="hidden" value="" />
</td>

JS Code:

$(".itemAC").autocomplete("/inventory2/index.php?r=item/AjaxLookup",{
'minChars':2,'delay':500,'matchCase':false,'max':10}
).result(function(event,item){alert(this.next().id)}
);

and I got "this.next is not a function" error, I tried $(this).next, $("#"+this.id).next and I got the same error message, what am I doing wrong?

Edit: Ok, so I tried to remove almost all of the HTML and JS codes so that the HTML body contains:

Answer 1

It should be $(this) instead of this

When using this it refers to the DOM object, whilst using $(this) refers to the jQuery object which has the next() method. Since you were trying to use the DOM object it doesn't know what the method is.

Answer 2

I don't think it's a scope issue, more of a JQuery usage issue. this does refer to the Dom object, and doesn't allow you to use next(), however when using $(this).next() properly, to access the id attribute of the target object you need to use the proper jquery syntax for that: $(this).next().attr("id"));.

This should work for you:

$(".itemAC").autocomplete("/inventory2/index.php?r=item/AjaxLookup",{
'minChars':2,'delay':500,'matchCase':false,'max':10}
).result(function(event,item){alert($(this).next().attr("id"))}
);

If you're looking to set the value for that second input, use the .val() method to accomplish that.