Jquery autocomplete UI - No results on multiple fields

Posted by pjammer on Stack Overflow See other posts from Stack Overflow or by pjammer
Published on 2012-05-30T14:36:39Z Indexed on 2012/05/30 16:40 UTC
Read the original article Hit count: 266

Filed under:
|

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

    © Stack Overflow or respective owner

    Related posts about jQuery

    Related posts about jquery-ui