JQuery LiveQuery не исправляя autosuggest?

Question

У меня включена функция автозаполнения в поле поиска товаров в разделе позиций заказа здесь:

Проблема в том, что когда я добавляю новые поля продукта поиска (зеленая кнопка под заголовком позиции заказа), плагин автоматического предложения не работает в новых полях. Из нескольких статей, которые я прочитал, я думал, что autosuggest исправит эту проблему, но не исправит. Есть идеи почему?

Автоматическое предложение:

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

добавление нового поля

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

Я считаю, что проблема в том, что вы не добавляете автодополнение в новый элемент. Вам на самом деле не нужны livequery. Следовательно, изменив свой второй блок кода следующим образом:

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

Я считаю, что это следует сделать, за исключением одного или двух небольших изменений здесь и там.

Всего два комментария о том, как вы обрабатываете элементы формы, кстати - ваш метод приводит к тому, что более одного элемента имеют один и тот же идентификатор, который недопустим (хотя он будет работать) - возможно, измените его для выбора на основе классов вместо , Во-вторых, вы использовали функцию html для установки значения входных данных - даже не уверены, что это работает, поэтому в предложенном мной решении я заменил вызовы html на val.