Jquery autocomplete UI - No results on multiple fields

Question

Andrew's answer to my comment has sparked this question.

According to his awesome answer in the link above, the code at the bottom of the question will only work for ONE widget. But it's killer nice code and makes sense... I guess I want the best of both worlds. Nice JS, (if that is possible) and to have the zero results show() just the element that we're using at the time.

This code snippet is the main crux of my problem, as I see it:

        source: function (request, response) {
        jQuery.ajax({
            url: "/autocomplete.json",
            data: {
            term: request.term
            },
            success: function (data) {
            if (data.length == 0) {
        jQuery('span.guest_investor_email').show();
                jQuery('span.investor_field_delete_button').show();
            }
            response(data);
            }
        });

Currently:

I have a button on my page that says "Add more Information" and each time you click it, a new instance of the autocomplete text field appears, complete with some hidden fields and a display:none; on guest_investor_email. If I use the autocomplete text field, say 3 times, and i have 3 autocomplete instances on the page and the third one finds 0 results: The code will show() all 3 instances of the guest_investor_email text field, instead of just this one that is blank.

QUESTION:

How do i get something like jQuery(this).siblings(('span.guest_investor_email').show(); to work?

this is an Object and not an array of elements to select. If it isn't with this I don't mind, as long as I know how to get at it. Thanks.

---

Full Code:

     jQuery(".auto_search_complete").live("click", function() {
     jQuery(this).autocomplete({
        minLength: 3,

        source: function (request, response) {
        jQuery.ajax({
            url: "/autocomplete.json",
            data: {
            term: request.term
            },
            success: function (data) {
            if (data.length == 0) {
        jQuery('span.guest_investor_email').show();
                jQuery('span.investor_field_delete_button').show();
            }
            response(data);
            }
        });
        },

        focus: function(event, ui) {
        jQuery(this).val(ui.item.user ? ui.item.user.name : ui.item.pitch.name);
        return false;
        },
        select: function(event, ui) {
        jQuery(this).val(ui.item.user ? ui.item.user.name : ui.item.pitch.name);
        jQuery(this).siblings('div.hidden_fields').children('.poly_id').val(ui.item.user ? ui.item.user.id : ui.item.pitch.id);
        jQuery(this).siblings('div.hidden_fields').children('.poly_type').val(ui.item.user ? "User" : "Pitch");
        jQuery(this).siblings('span.guest_investor_email').hide();
                jQuery(this).siblings('span.investor_field_delete_button').show();
                jQuery(this).attr('readonly','readonly');
                jQuery(this).attr('id', "investor-selected");

        return false;
        }
    }).each(function() {
        jQuery(this).data( "autocomplete" )._renderItem = function( ul, item ) {
        return jQuery( "
" )
            .data( "item.autocomplete", item )
            .append("
" + (item.user ? item.user.name : item.pitch.name) + "
" + (item.user ? item.user.investor_type : item.pitch.investor_type) + " - " + (item.user ? item.user.city : item.pitch.city) + "
" )
            .appendTo( ul );
        };
    });
});

Iodine

Answer 1

I didn't fully understand what you want to achieve but I think you want to get the element you bind the .live event right?

jQuery(".auto_search_complete").live("click", function() {
    var $this = $(this);
    jQuery(this).autocomplete({
        minLength: 3,
        ...
        success: function (data) {
        if (data.length == 0) {
    jQuery('span.guest_investor_email').show();
            $this.siblings('span.investor_field_delete_button').show();
        }
    ...

Maud

I've updated the question and will try your answer out. thanks! – Iodine

Uncaught TypeError: Object [object HTMLLabelElement],[object HTMLSpanElement],[object HTMLSpanElement],[object HTMLDivElement] has no method 'show'looks like it just passed a string, maybe? Or at least not a jQuery object.. something was a miss. – Iodine

past edit of comment. You are a genius. Or at the very least helpful @tpaksu thanks! – Iodine

Man, i was trying to add that var everywhere but where you did. i was putting it in the success, just after autocomplete(... I obviously didn't get it right, so thanks. – Iodine