jquery livequery not fixing autosuggest ?

Question

Hi,

I have an autosuggest feature enabled in search products field of order items section here:

The issue here is, when I add new search product fields (green button under order items title), auto suggest plugin is not functioning in the new fields. From a few articles I read, I thought autosuggest would fix this issue, but not fixing. Any idea why?

auto suggest:

$("#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]);
});

adding new field

$('#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

I reckon the problem is that you don't add the autocompletion to the new element. You don't actually need livequery. Therefore, changing your second block of code like so:

$('#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;
});

I reckon that should do it, barring one or two small tweaks here and there.

Just two comments on how you are handling your form elements by the way - your method results in more than one element possessing the same ID, which is invalid (although it will work) - perhaps alter it to select based on classes instead. Secondly, you used the html function to set the value of the inputs - not even sure that works, so in my proposed solution I replaced the html calls with val.