jquery livequery ne corrige pas autosuggest?

Question

J'ai une fonctionnalité autosuggest activé dans le champ de produits de recherche de la section des articles de commande ici:

Le problème ici est, lorsque j'ajoute de nouveaux champs de produits de recherche (bouton vert sous le titre des articles de commande), le plugin de suggestion automatique ne fonctionne pas dans les nouveaux champs. A partir de quelques articles que j'ai lus, je pensais que autosuggest permettrait de résoudre ce problème, mais pas de réparer. Une idée pourquoi?

suggestion automatique:

$("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", { 
    selectFirst: false 
}); 

$("#PRODUCTNAME").result(function(event, data, formatted) { 
    if (data) 
     $("#PRICE").html(data[1]); 
     $("#ID").html(data[2]); 
     $("#UNITPRICE").html(data[1]); 
     $("#PRODUCTID").html(data[2]); 
}); 

ajouter un nouveau champ

$('#AddProduct').livequery('click', function(event) { 
    $('#OrderProducts').append('<div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME" value="" class="width98" /><input type="hidden" id="PRODUCTID" name="PRODUCTID" /><input type="hidden" id="UNITPRICE" name="UNITPRICE" /><small>Search Productsvalue="" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<br />Total Price:</span></div>'); 
    return false; 

});

html

 <fieldset> 
      <h2>Order Items</h2> 
      <div id="OrderProducts"> 
       <a href="#" id="AddProduct"><img src="icons/add.png" alt="Add" /></a><a href="#" id="DeleteProduct"><img src="icons/cancel.png" alt="Cancel" /></a> 
      </div> 

       <input type="hidden" id="PRODUCTID" name="PRODUCTID" /> 
       <input type="hidden" id="UNITPRICE" name="UNITPRICE" /> 
       <small>Search Products</small> 
      </div> 
      <div class="column width20"> 
       <input type="text" id="UNITPRICE" name="UNITPRICE" value="" class="width98" /> 
       <small>Quantity</small> 
      </div> 
      <div class="column width30"> 
       <span class="prices">Unit Price:<br />Total Price:</span> 
      </div> 
     </fieldset> 
}); 

Answer 1

Je pense le problème est que vous n'ajoutez pas la saisie semi-automatique au nouvel élément. Vous n'avez pas besoin de livequery. Par conséquent, la modification de votre deuxième bloc de code comme ceci:

$('#AddProduct').click(function() { 
     var adding = $('<div class="column width50"><input type="text" id="PRODUCTNAME" name="PRODUCTNAME" value="" class="width98" /><input type="hidden" id="PRODUCTID" name="PRODUCTID" /><input type="hidden" id="UNITPRICE" name="UNITPRICE" /><small>Search Products</small></div><div class="column width20"><input type="text" id="UNITPRICE" name="UNITPRICE" value="" class="width98" /><small>Quantity</small></div><div class="column width30"><span class="prices">Unit Price:<br />Total Price:</span></div>');   
     $('#OrderProducts').append(adding); 

     adding.find("#PRODUCTNAME").autocomplete("orders.cs.asp?Process=ListProducts", { 
      selectFirst: false 
     }).result(function(event, data, formatted) { 
      if (data) { 
       adding.find("#PRICE").val(data[1]); 
       adding.find("#ID").val(data[2]); 
       adding.find("#UNITPRICE").val(data[1]); 
       adding.find("#PRODUCTID").val(data[2]); 
      } 
     }); 

     return false; 
}); 

Je pense que devrait le faire, à moins d'un ou deux petits coups secs ici et là. Juste deux commentaires sur la façon dont vous manipulez vos éléments de formulaire d'ailleurs - votre méthode se traduit par plus d'un élément possédant le même ID, ce qui est invalide (bien que cela fonctionnera) - peut-être modifier pour sélectionner en fonction des classes au lieu. Deuxièmement, vous avez utilisé la fonction html pour définir la valeur des entrées - même pas sûr que cela fonctionne, donc dans ma solution proposée j'ai remplacé les appels html par val.