jquery livequery没有修复autosuggest?

时间:2009-06-24 18:49:49

标签: jquery

我在此处的订单商品部分的搜索产品字段中启用了自动提示功能:

这里的问题是,当我添加新的搜索产品字段(订单项标题下的绿色按钮)时,自动建议插件在新字段中不起作用。从我读过的一些文章中,我认为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>
});

1 个答案:

答案 0 :(得分:0)

我认为问题是你没有将自动完成添加到新元素。你实际上并不需要实时查询。因此,更改第二个代码块如下:

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

我认为应该这样做,除非在这里和那里进行一两次小调整。

关于如何处理表单元素的方法只有两条评论 - 您的方法导致多个元素拥有相同的ID,这是无效的(虽然它可以工作) - 也许改变它以基于类选择。其次,你使用html函数来设置输入的值 - 甚至不确定是否有效,所以在我提出的解决方案中,我用val替换了html调用。