Fatal编程技术网
  • jquery/
  • Jquery 使用类属性自动完成动态添加的文本框

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

jquery html dynamic autocomplete

Jquery 使用类属性自动完成动态添加的文本框,jquery,html,dynamic,autocomplete,html-table,Jquery,Html,Dynamic,Autocomplete,Html Table,文件auto.html有一个由6行组成的表。当用户在文本框中输入值并单击“添加”按钮时，表中的行数将增加。我正在使用所有文本框的class属性来基于类选择器执行自动完成。现在我还需要为动态创建的文本框实现自动完成，我甚至尝试了id选择器（给出了内部注释）。在动态添加的文本框中，我看到了几个与do autocomplete问题相关的问题，但没有一个能够充分解决我的问题。我在下面包含了我的代码 auto.html <!doctype html> <html lang="en">

文件auto.html有一个由6行组成的表。当用户在文本框中输入值并单击“添加”按钮时，表中的行数将增加。我正在使用所有文本框的class属性来基于类选择器执行自动完成。现在我还需要为动态创建的文本框实现自动完成，我甚至尝试了id选择器（给出了内部注释）。在动态添加的文本框中，我看到了几个与do autocomplete问题相关的问题，但没有一个能够充分解决我的问题。我在下面包含了我的代码

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>
将availableTags数组包含在auto.js文件之外，如下所示：

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


var availableTags=[
“澳大利亚”，
“比利时”，
“加拿大”，
“丹麦”，
“埃塞俄比亚”，
“法国”
];
变量no_of_行=6；
var upto=第行的第行数+1；
var总计行数=总计行数；
$（文档）.ready（函数（）{
$（“.tags”）.autocomplete({
资料来源：availableTags
});
$（'.numbersOnly'）.keyup（函数（）{
this.value=this.value.replace（/[^0-9\.]/g'）；
});
$（“#但是”）。单击（函数（）{
var no_of_extra=parseInt（$（“#no_of_extra”）.val（），10）；
总行数=无行数+无额外行数；
$（“#mytable”）.find（“tr:gt（“+upto+”））.remove（）；
对于（var i=行数+1；i

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