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