Jquery Autocomplete

[Droned]

Momenteel gebruik ik de autocomplete bij input fields van de klasse "product_name_selector" en heb het volgende probleem. Wanneer ik een item selecteer uit de lijst worden de producten ingevuld in de eerstvolgende tabel na het input field.

Nu wanneer ik 3 inputfields onder elkaar heb staan (dynamisch) dan worden de producten 3 maal ingevuld in de tabel, ik heb al wat debugging gedaan en de functie result wordt inderdaad 3 maal opgeroepen zonder dit eigenlijk zou mogen.

Hieronder vind je de code, het probleem is dat we geen andere naam aan de klasses kunnen geven zoals xx_1, xx_2, ...

JavaScript:

function autoCompleteProducts()
{
    $('.product_name_selector').each(
      function()
      {
        $( this ).autocomplete( '/admin/products.js',
        {
          matchContains : 1, max : 100
        })
        .result(
          function( event, data, formated )
          {
            var id = $( this ).attr( 'id' );
            $( '#hiddenIDbox' ).append( data[1] );
            autoCompletePurchaseItems(id);
          }
        );
      }
    );
    $("dl table:last[class=purchase_product]").hide();
}
function autoCompletePurchaseItems(id)
{
        var product_id = $("#hiddenIDbox").html();

        /* DELETE ALL THE ITEMS IN THE LIST FIRST */
        $("input[id="+id+"]+dl table:first tbody").find("tr").remove();

        // ADD items of that product
        $.getJSON("/admin/inventory_items.json?product_id="+product_id, function(data){
            $.each(data, function(i, item) {
                    $("input[id="+id+"]+dl table:first tbody").append('<tr><td>'+item+'</td><td>0</td></tr>');
                });
         });
         $("input[id="+id+"]+dl table:first").fadeIn('fast');
          $("#hiddenIDbox").html("");
         // clear the hiddenIDbox
}

[pieturp]

Waarom kun je niet meerdere classes aan die input fields hangen
Daarnaast kun je middels de selector ":first" toch gewoon de eerste pakken?

Tip: gebruik één consequente indent-stijl. Je gebruikt nu te pas en te onpas wel of juist geen enters na de openingsaccolade bij functies en objecten. Dat leest niet prettig en ziet er een beetje rommelig uit.

[Verwijderd]

Tja een simpele quickfix zou zijn in de functie var $x neerzetten, in de code if ($x > 1) { break; }

[imp4ct]

Je kan misschien eens kijken naar de jQuery UI Autocomplete tool, werkt echt zeer makkelijk.

http://jqueryui.com/demos/autocomplete/

[Grijze Vos]

Verwijderd schreef op zaterdag 17 april 2010 @ 15:39:
Tja een simpele quickfix zou zijn in de functie var $x neerzetten, in de code if ($x > 1) { break; }

Met alle respect, als je dat soort oplossingen aan gaat dragen post dan gewoon niet. Daar los je niets mee op en obfusceer je alleen maar het echte probleem.