使用Class属性动态添加文本框的自动完成
使用Class属性动态添加文本框的自动完成
提问于 2013-07-29 06:09:48
文件auto.html有一个由6行组成的表。当用户在文本框中输入值并单击“添加”按钮时，表中的行数将增加。我对所有文本框使用class属性来根据类选择器执行自动完成。现在我也需要为动态创建的文本框实现自动完成，我甚至尝试了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
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2013-07-29 06:42:38
在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>请在这里找到工作演示：演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17917087
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号