使用类属性自动完成动态添加的文本框答案

【问题标题】：Autocomplete for dynamically added text boxes using Class Attribute使用类属性自动完成动态添加的文本框
【发布时间】：2013-07-28 19:59:12
【问题描述】：

文件 auto.html 有一个由 6 行组成的表格。当用户在文本框中输入值并单击添加按钮时，表格中的行数会增加。我正在使用所有文本框的类属性来根据类选择器执行自动完成。现在我也需要为动态创建的文本框实现自动完成，我什至尝试了 id 选择器（在评论中给出）。我在动态添加的文本框中看到了几个与自动完成问题相关的问题，但没有一个能充分解决我的问题。我在下面包含了我的代码。

auto.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="auto.js">

</script>
<script>
var no_of_rows = 6;
var upto = no_of_rows + 1 ;
var total_rows = total_rows ;


$(document).ready(function(){
$('.numbersOnly').keyup(function () { 
this.value = this.value.replace(/[^0-9\.]/g,'');
});
  $("#but").click(function(){
   var no_of_extra = parseInt($("#no_of_extra").val() , 10);
    total_rows = no_of_rows + no_of_extra;
    $("#mytable").find("tr:gt("+upto+")").remove();


    for ( var i = no_of_rows + 1 ; i <= total_rows ; i ++)
    {
        var tag = "<tr> <td>" + i + "</td> <td> <input class = \"tags\" id = \"T"+i+"\"> </td>";
        $("#mytable").append(tag);
/*
        $( "#T" + i ).autocomplete({
            source: availableTags 
        });
*/

    }
  });

});



</script>
</head>
<body >



        <input type="text" id="no_of_extra" class="numbersOnly" >

        <input type="button" id = "but" value="Add" >
        <br><br><br><br>

    <table id="mytable">
        <tr><th>no</th><th>type</th><tr>
        <tr><td>1</td><td><input class ="tags" id = "T1"></td></tr>
        <tr><td>2</td><td><input class ="tags" id = "T2"></td></tr>
        <tr><td>3</td><td><input class ="tags" id = "T3"></td></tr>
        <tr><td>4</td><td><input class ="tags" id = "T4"></td></tr>
        <tr><td>5</td><td><input class ="tags" id = "T5"></td></tr>
        <tr><td>6</td><td><input class ="tags" id = "T6"></td></tr>

    </table>

</body>
</html>

auto.js

$(function() {
var availableTags = [
"Australia",
"Belgium",
"Canada",
"Denmark",
"Ethiopia",
"France"
];
$( ".tags" ).autocomplete({
source: availableTags 
});
});

【问题讨论】：

标签： jquery html dynamic autocomplete html-table

【解决方案1】：

在auto.js文件外包含availableTags数组，如下所示：

<script>

    var availableTags = [
    "Australia",
    "Belgium",
    "Canada",
    "Denmark",
    "Ethiopia",
    "France"
    ];

    var no_of_rows = 6;
    var upto = no_of_rows + 1 ;
    var total_rows = total_rows ;


    $(document).ready(function(){

    $( ".tags" ).autocomplete({
    source: availableTags 
    });

    $('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
    });
      $("#but").click(function(){
       var no_of_extra = parseInt($("#no_of_extra").val() , 10);
        total_rows = no_of_rows + no_of_extra;
        $("#mytable").find("tr:gt("+upto+")").remove();


        for ( var i = no_of_rows + 1 ; i <= total_rows ; i ++)
        {
            var tag = "<tr> <td>" + i + "</td> <td> <input class = \"tags\" id = \"T"+i+"\"> </td>";
            $("#mytable").append(tag);

            $( "#T" + i ).autocomplete({
                source: availableTags 
            });


        }
      });

    });



    </script>

请在此处找到工作演示：Demo

【讨论】：