动态搜索字段上的自动完成 [英] autocomplete on dynamic search field

问题描述

首先，我正在做的项目是在WordPress上，我在为我的计算表单找到解决方案时遇到了问题，因此我有一个jquery文件，该文件为搜索字段创建自动完成功能，另一个jquery文件复制该字段最多为7，并且在提交时应从数据库中获取一些数字并将其相加.因此，当我添加新字段时，我的问题就来了，即自动完成功能仅在页面加载的第一个字段上进行.如何更改自动完成功能，使其可以在动态字段中使用?

first of all the project i'm doing is on WordPress, I have a problem finding a solution for my calculating form, so I have a jquery file that creates an autocomplete for a search field and another jquery file that duplicate the field to a maximum of 7 and when submitted should take some numbers from the database and sum them. So my problem comes when I add new field the autocomplete work just on the first one that was loaded with the page. how can I change the autocomplete so that it could work in the dynamic field?

自动完成的jQuery

the 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

then here my ad new field 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部分

and last my html part from my custome template

<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>

感谢大家的宝贵时间

推荐答案

• 我已将您的自动完成脚本和添加新字段"脚本结合在一起.如果您查看代码，则setupDishAc()会设置自动完成功能.
• 在添加新字段"脚本中，我用getDishHtml()函数替换了html变量(以便为"设置一个唯一的ID 更容易 ).
• 在每个动态生成的菜盒"中，为删除"按钮分配了remove class和 not id.请注意，第一个(静态)菜" input应该将id设置为dish.
• I have combined both your auto-complete and "add new field" scripts. If you look at the code, the setupDishAc() setups the auto-complete function.
• In the "add new field" script, I replaced the html variable with a getDishHtml() function (so that it's easier to set a unique ID to the "dish" input).
• In each dynamically-generated "dish box", the "remove" button is assigned the remove class and not id. Note that the first (static) "dish" input should have the id set to dish.

话虽如此，请尝试以下脚本:

With that said, try this script:

// 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 上进行实时演示.

Try a live demo on CodePen.

这篇关于动态搜索字段上的自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！