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 );
        };
    });
});

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();
        }
    ...