如何对动态创建的输入框应用自动完成
how to apply auto complete for dynamically created input box
我有5个输入框来添加产品,如果用户想添加更多产品,他可以单击添加更多产品,将出现5个新的动态创建的文本框。我的问题是我无法为我的动态输入框提供自动完成,但无法为我的静态输入框提供自动完成。
我的网页代码
<div class="pro" id="dynamicInput">
<div>Product Name 1
<input style="border:2px solid #7f9db9" name="product_1" id="in_pc_item_moq_unit_type1" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<input type="hidden" id="in_pc_item_moq_1">
</div>
<div>Product Name 2
<input style="border:2px solid #7f9db9" name="product_2" id="in_pc_item_moq_unit_type2" class="ui-autocomplete-input" maxlength="100" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div>Product Name 3
<input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type3" maxlength="100" name="product_3" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div>Product Name 4
<input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type4" maxlength="100" name="product_4" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
<div>Product Name 5
<input style="border:2px solid #7f9db9" class="ui-autocomplete-input" id="in_pc_item_moq_unit_type5" maxlength="100" name="product_5" placeholder="Enter your product name" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</div>
</div>
<div class="ta m15">
<input name="gluserid" id="glid" value="7171786" type="hidden"> <input type="button" value="Add more product" onclick="addInput('dynamicInput');">
<input type="submit" value="submit" name="submit">
</div>
我用于动态添加输入框的 java 脚本代码是
<script type="text/javascript">
var counter = 1;
var limit = 4;
var num=6;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
for(var i=1;i<=5;i++)
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "Product Name " + (num) + "<input style='border:2px solid #7f9db9' class='ui-autocomplete-input' id='in_pc_item_moq_unit_type" + num + "' maxlength='100' type='text' name='product_" + num + "' placeholder='Enter your product name'>";
document.getElementById(divName).appendChild(newdiv);
num++
}
counter++;
}
}
</script>
我的自动建议脚本是
<script type="text/javascript">
function auto_suggest(id)
{
if(typeof(Suggester)!="undefined")
{
sugg=new Suggester({"element":id,"onSelect":selecttext,"type":"mcat","placeholder":"Enter your product name","classPlaceholder":"ui-placeholder-input",minStringLengthToFetchSuggestion:1});
}else
{
setTimeout(function(){
auto_suggest()},50);
}
}
auto_suggest('in_pc_item_moq_unit_type1');
auto_suggest('in_pc_item_moq_unit_type2');
auto_suggest('in_pc_item_moq_unit_type3');
auto_suggest('in_pc_item_moq_unit_type4');
auto_suggest('in_pc_item_moq_unit_type5');
auto_suggest('in_pc_item_moq_unit_type6');
auto_suggest('in_pc_item_moq_unit_type7');
auto_suggest('in_pc_item_moq_unit_type8');
auto_suggest('in_pc_item_moq_unit_type9');
auto_suggest('in_pc_item_moq_unit_type10');
auto_suggest('in_pc_item_moq_unit_type11');
auto_suggest('in_pc_item_moq_unit_type12');
auto_suggest('in_pc_item_moq_unit_type13');
auto_suggest('in_pc_item_moq_unit_type14');
auto_suggest('in_pc_item_moq_unit_type15');
auto_suggest('in_pc_item_moq_unit_type16');
auto_suggest('in_pc_item_moq_unit_type17');
auto_suggest('in_pc_item_moq_unit_type18');
auto_suggest('in_pc_item_moq_unit_type19');
auto_suggest('in_pc_item_moq_unit_type20');
function selecttext(event, ui)
{
this.value = ui.item.value;
}
</script>
谁能告诉我我做错了什么,提前谢谢
试试这个:
for(var i=1;i<=5;i++)
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "Product Name " + (num) + "<input style='border:2px solid #7f9db9' class='ui-autocomplete-input' id='in_pc_item_moq_unit_type" + num + "' maxlength='100' type='text' name='product_" + num + "' placeholder='Enter your product name'>";
document.getElementById(divName).appendChild(newdiv);
num++;
auto_suggest('in_pc_item_moq_unit_type' + num); // apply autocomplete after element creation
}
相关文章:
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- AngularJs Cordova安卓应用程序中输入的4位密码PIN验证
- 将 CSS 应用于禁用的输入按钮
- 仅对一个输入按钮禁用应用
- 如何对动态创建的输入框应用自动完成
- 通过应用自定义 css 类禁用 html 输入元素
- Chrome没有正确地将值应用于正在被“刷新”的输入;观看”;
- Vue js 在输入字段中对 v-model 应用过滤器
- VAlue未应用于使用Jquery代码的输入
- iOS cordova应用程序中的文本区域只接受一次输入
- Chrome应用程序在Webview中的按钮/输入上添加点击事件
- Handlebar.js模板,使用Undercore.js-Zendesk应用程序进行动态表单输入
- 在输入后,有条件地应用Angular中的两个类之一
- 应用脚本的绑定方式因输入源而异
- 如何单独对输入标签应用样式
- 将数学规则(如rnd,max等)应用于用户使用AngularJS指令输入的值
- 如何检查“http://”是否包含在 Angular .js 应用程序的 url 输入中
- 使用 Jquery 将属性 Required 添加到 Razor 应用程序中的输入中
- 如何将应用程序的数据输入语言限制为英语(或拉丁字母)
- 移动应用输入/输出