文件 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
});
});