1

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

我已阅读其他帖子并了解我必须使用类而不是 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;
    });
});

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

4

4 回答 4

3

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

  1. i在将自动完成应用于文本字段之前增加计数器
  2. 通过停止脚本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;

});

ps 我已更改availableTags为全局变量以使演示有效，
但我认为您会使用查询来检索标签。

于 2013-03-10T14:55:48.740 回答
1 
$('#addScnt').live('click', function() {
  .........................

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


 return false;
  ..................
});
于 2013-03-10T12:54:14.533 回答
0

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

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

希望它可以帮助你。

于 2013-03-10T13:08:29.713 回答
0

第二个$(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>
于 2013-03-10T14:19:12.933 回答