首先我正在做的项目是在WordPress上,我在查找计算表单的解决方案时遇到问题,所以我有一个jquery文件为搜索字段创建自动完成,另一个jquery文件复制该字段最多为7,提交时应从数据库中取一些数字并加总。所以我的问题出现了,当我添加新字段时,自动完成工作就在第一个加载了页面的工作上。如何更改自动完成功能以便它可以在动态字段中工作?
autocomplete jquery
jQuery.noConflict();
jQuery(document).on("focus", ".dish", function($) {
var m = ["lasagna","pasta",...,"buttered fish","fish curry"];
if (!jQuery(this).is(".aced"))
jQuery(this).addClass("aced").autocomplete({
source: m
});
});
然后我的广告新字段jquery
jQuery(document).ready(function(e){
var html = '<div class="add-f"><div><label class="plate_label">Dish</label><input type="text" name="dish_name[]" class="dish" placeholder="Enter plate name" /></div><div><label class="quantity_label">Quantity:</label><input type="text" name="dish_quantity[]" class="quantity" placeholder="Enter gram or pieces/slices" /><a href = "#" id = "remove" ><font color="red"> X</font></a></div> </div>';
var max_rows = 6;
var x = 1;
jQuery("#add_more").click(function(e){
if (x <= max_rows){
jQuery("#container-form").append(html);
x++;
}
});
jQuery("#container-form").on('click','#remove',function(e){
jQuery(this).parents('.add-f').remove();
x--;
});
});
并从我的客户模板中删除我的html部分
<form method = "POST">
<div id = "container-form">
<div><label class="plate_label">Dish:</label><input type="text" name="dish_name[]" id="dish" class="dish" placeholder="Enter plate name" ></div>
<div><label class="quantity_label">Quantity:</label><input type="text" name="dish_quantity[]" class="quantity" placeholder="Enter gram or pieces/slices" /></div>
</div>
<p />
<p><br><input id="add_more" type="button" value="Add More"></p>
<input type="hidden" name="submitted" value="1">
<p><br><input name="submit" type="submit" value="Submit"></p>
</form>
谢谢大家的时间
答案 0 :(得分:0)
setupDishAc()
会设置自动完成功能。html
变量替换为getDishHtml()
函数(以便更容易为“菜单”设置唯一ID “input
)。remove
class
和不 id
。请注意,第一个(静态)“菜肴”input
应将id
设置为dish
。说完了,试试这个脚本:
// The code was beautified via http://jsbeautifier.org/ with 2 spaces indentation.
jQuery(document).ready(function($) {
var dishes_list = ["lasagna", "pasta", '...', "buttered fish", "fish curry"];
var max_rows = 6;
var x = 1;
// Setup Autocomplete on an element.
function setupDishAc(element) {
if (!$(element).is('.aced')) {
$(element).addClass('aced').autocomplete({
source: dishes_list
});
}
}
// Get the HTML for a "dish" box.
function getDishHtml(n) {
return '<div class="add-f"><div><label class="plate_label">Dish</label><input type="text" id="dish-' + n + '" name="dish_name[]" class="dish" placeholder="Enter plate name" /></div><div><label class="quantity_label">Quantity:</label><input type="text" name="dish_quantity[]" class="quantity" placeholder="Enter gram or pieces/slices" /></div><a href="#" class="remove" title="Remove" style="color: red;">×</a></div>';
}
// Add new dynamic "dish" box.
$("#add_more").click(function(e) {
e.preventDefault();
if (x <= max_rows) {
$("#container-form").append(getDishHtml(x));
setupDishAc('#dish-' + x);
x++;
}
});
// Remove a dynamic "dish" box.
$("#container-form").on('click', '.remove', function(e) {
e.preventDefault();
$(this).parents('.add-f').remove();
x--;
});
// Setup for the first "dish" box.
setupDishAc('#dish');
});
在CodePen上试用现场演示。