javascript - 将 jquery-ui 自动完成与动态表单生成结合使用

标签 javascript jquery html jquery-ui autocomplete

我有一个表单,可以使用基于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/

相关文章:

html - 如何在开发过程中使本地网站自动更新

html - SVG 堆叠导致失真

javascript - 如何在 Grunt Build 中使用多个复制命令?

javascript - 更改动态列表项的 CSS

javascript - 来自 AJAX 请求时,toggleClass 不起作用

html - 圆化盒子阴影内的内 Angular ?

javascript - for 循环并将结果集附加到 div

javascript - 谷歌地图航点不显示完整路径

javascript - 从 getter 获取 Map 代理时接收器不兼容

javascript - 从数据库中检索数据时,AJAX 代码与 JSON 和 PHP 不相关