Question

问题：（jQuery）自动完成仅适用于第一个输入（默认显示）。它不适用于使用add row函数添加的其他行。

我已阅读其他帖子并了解我必须使用课程而不是ID。但它仍然不起作用。

我正在使用jquery自动完成和一些javascript来添加和删除特定ID的行。

以下是标题：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

以下是jquery代码：

jQuery(document).ready(function ($) {

  /*  availableTags = [
        "Demo",
        "Senna",
        "Adam",
        "Eva",

    ];*/

    $('.autofill').autocomplete({
        source:'suggest.php', minLength:2
    });
});

以下是HTML代码：

    <div class="content-left">
    <a href="#" id="addScnt">Add rows</a>

        <div id="p_scents">
            <p>
                <label style="margin-bottom:10px;" for="p_scnts">
                    <input class="autofill" type="text" id="p_scnt" size="20" name="p_scnt[]"
                    value="" placeholder="Enter text" />
                </label>
            </p>
        </div>
    </div>

**Here is the Javascript to add rows:** 

$(function () {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function () {
        $('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill"  type="text" name="p_scnt[]" size="20" id="p_scnt_' + i + '" value=""  placeholder="Add text"       /></label  for="remScnt"> <label style="padding-left:400px;"><a href="#" id="remScnt">Remove</a></label></p>').appendTo(scntDiv);
        //i++;
        //return false;

        //Added the 5 lines below

        $(function ($) {
            $('#p_scnt_' + i).autocomplete({
            source:'suggest.php', minLength:2
            });
        });
        i++;
        return false;

    });

    $('#remScnt').on('click', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

所以上面的代码工作正常。为你的帮助干杯;）

Answer 1

对于您的最新代码，您犯了两个错误：

在将自动填充应用于文本字段

i

return false

此外，建议使用.on()替换.live()，因为它已在1.7版中弃用。

演示：http://jsfiddle.net/indream/f8mt4/

$('#addScnt').on('click', function () {
    $(...).appendTo(scntDiv);
    //i++; Should not be done here
    //return false; Stopped the script

    //Added the 5 lines below

    $(function ($) {
        $('#p_scnt_' + i).autocomplete({
            source: window.availableTags,
            minLength: 1
        });
    });
    i++; // should increase counter here
    return false;

});

P.S。为了使演示工作，我已将availableTags更改为全局变量但我认为你会使用查询来检索标签。

Answer 2

$('#addScnt').live('click', function() {
  .........................

$('#p_scnt_'+i).autocomplete({
  source:'suggest_fill.php', 
  minLength:1  
});


 return false;
  ..................
});

Answer 3

我认为这是js文件加载问题的顺序。

尝试将第二个文件放在第一个文件上方。

希望它对你有所帮助。

Answer 4

第二个$(function(){太多了。它应该看起来像这样

<script>
$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('#addScnt').live('click', function() {
    $('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill"  type="text" name="p_scnt[]" size="20" id="p_scnt_' + i +'" value=""  placeholder="Add text"       /></label  for="remScnt"> <label style="padding-left:400px;"><a href="#" id="remScnt"><img src="../../img/remove.jpg" width=""  height=""  class="img"  alt=""  title=""/></a></label></p>').appendTo(scntDiv);
    i++;   

    //Added the 5 lines below    

    $('#p_scnt_'+i).autocomplete({
      source:'suggest_fill.php', 
      minLength:1  
    });
  return false;
  });

  $('#remScnt').live('click', function() {
    if( i > 2 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});
</script>

动态新行上的jQuery自动完成

4 个答案: