我有一个表单,可以使用基于this script的js脚本动态更新。动态生成选择列表以允许为动态生成的字段选择属性。但是,该列表包含数百个独特的属性,因此我想添加一个“搜索”框,以便选择更容易。我一直在使用 Jquery-ui 自动完成功能,当输入框位于动态更新的表单之外时它工作正常,但是,一旦我将其放入表单内,它就不起作用了。以下 div 动态插入到表单中:
<div id="readroot" style="display: none">
<select name="_name">
<option value="1">1</option>
<option value="2">2</option>
//many more options...
</select>
First text
<input type="text" size="15" name="xyz" /> Second text
<input type="text" size="15" name="xyz2" />
<input type="button" value="Remove trait" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
形式:
<form method="post" name="disForm" target="_blank" id="disForm">
<div id="writeroot"></div>
<input type="button" value="Add trait" onclick="moreFields();" />
</form>
这是将新字段(“readroot”div)添加到“writeroot”-div 的脚本:
<script type="text/javascript">
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
//newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i = 0; i < newField.length; i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
newField[i].title = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields, insertHere);
}
window.onload = moreFields;
</script>
这是自动完成的输入和脚本:
<input title="autocomplete" name="autocomplete">
<script>
$("[title^='autocomplete']").autocomplete({
source: ["...many values..."]
});
</script>
我正在使用 jqueryui.com
中的 jQuery UI Autocomplete 1.11.4
。重复一遍,该脚本在“readroot
”div 外部时有效,但在“readroot
”div 内部时无效。为什么它在“readroot
”div 中不起作用?
更新 我已按照 pablito.aven 的建议更正了代码。添加其他类型的可搜索列表,例如 chosenjs也可以在 'readroot' div 外部工作,但不能在内部工作。自动完成脚本的工作原理如下:
<div id="readroot" style="display: none">
<select name="_name">
<option value="1">1</option>
<option value="2">2</option>
//many more options...
</select>
First text
<input type="text" size="15" name="xyz" /> Second text
<input type="text" size="15" name="xyz2" />
<input type="button" value="Remove trait" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
<input title="autocomplete" name="autocomplete">//input is outside readroot, Works!
<script>
$("[title^='autocomplete']").autocomplete({
source: ["...many values..."]
});
</script>
但是不是这样:
<div id="readroot" style="display: none">
<select name="_name">
<option value="1">1</option>
<option value="2">2</option>
//many more options...
</select>
First text
<input type="text" size="15" name="xyz" /> Second text
<input type="text" size="15" name="xyz2" />
<input type="button" value="Remove trait" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
<input title="autocomplete" name="autocomplete"> //input is inside 'readroot' Does not work :(
</div>
<script>
$("[title^='autocomplete']").autocomplete({
source: ["...many values..."]
});
</script>
最佳答案
我想我现在找到了你的答案。
当您使用 moreFields()
函数添加新选择时,您将把 readroot
中的代码复制到 writeroot
之前。您正在复制代码,生成新元素。但是,生成自动完成的脚本已经运行。
<script>
$("[title^='autocomplete']").autocomplete({
source: ["...many values..."]
});
</script>
因此,自动完成功能仅适用于运行脚本时已经存在的元素。
我可能猜测,如果您从 readroot
中删除 display:none
,自动完成功能将在其中起作用,但仍然无法在动态生成的选择上起作用。
您应该做的是在添加更多字段时再次运行该脚本,以便它绑定(bind)到新生成的字段。像这样的东西可能会起作用:
<script type="text/javascript">
function initializeAutocomplete(){
$("[title^='autocomplete']").autocomplete({
source: ["...many values..."]
});
}
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
//newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i = 0; i < newField.length; i++) {
var theName = newField[i].name;
if (theName){
newField[i].name = theName + counter;
newField[i].title = theName + counter;
}
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields, insertHere);
initializeAutocomplete();
}
window.onload = moreFields;
</script>
我还在 if
语句中添加了 {}
,以及缺少的一两个分号。
如果这有效,如果您支持我的答案,我将不胜感激。如果没有,我们将不得不继续努力。
关于javascript - 将 jquery-ui 自动完成与动态表单生成结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30898161/