在动态搜索字段上自动完成

时间:2018-04-23 18:33:12

标签: jquery wordpress

首先我正在做的项目是在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>

谢谢大家的时间

1 个答案:

答案 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;">&times;</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上试用现场演示。