Question

我有一个html表单来读取数据库中的数据。表单包含来自awesomeplete的自动完成功能，该功能显示数据库中的值，在输入字段中输入至少2个字母后可以选择这些值。这很好用！

现在，我添加了使用以下javascript函数创建其他输入字段的可能性：

enter code here

    <script>
    var counter = 1;

    var limit = 10;

    function addInput(divName){

         if (counter == limit)  {

              alert("You have reached the limit of adding " + counter + "   
    inputs");

         }

         else {

              var newdiv = document.createElement('div');

              newdiv.innerHTML = '<br><input type="text" 
    id="productinput11" name="productinput[]" class="awesomplete" 
    list="productinputselect" size="20"/>';

              document.getElementById(divName).appendChild(newdiv);

              counter++;

         }

    }
    </script>

         <div id="dynamicInput">
         <b></b><input type="text" id="productinput11" name="productinput 
    []" class="awesomplete" list="productinputselect" size="20"/>
         </div>
         <input type="button" value="Weiteres Eingabefeld" onClick="addInput
    ('dynamicInput');">

enter code here

现在的问题是，来自awesomeplete的自动完成功能仅在此函数的第一个输入字段中起作用，而在另外创建的输入字段中不再起作用，尽管class =＆＃34; awesomplete＆＃34;在任何地方都有。如何使这个功能在所有添加的输入字段中起作用？

Answer 1

已为所有.awesomplete类元素加载了您的Awesomplete。

如果添加一些，则必须重新实例化Awesomplete。

所以，你的其他声明应该是这样的

function addInput(divName){
  if (counter == limit)  {
    [...]
  } else {
    // Create new div
    var newdiv = document.createElement('div');
    newdiv.innerHTML = '<br><input type="text" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/>';
    document.getElementById(divName).appendChild(newdiv);

    // Re instantiate Awesomplete
    new Awesomplete(newdiv.querySelector('input'), { list: document.querySelector('#productinputselect') });

    // Set counter
    counter++;
  }
}

这是一个工作例子

＆＃13;

var newdiv = document.createElement('div');
newdiv.innerHTML = '<br><input type="text" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/>';
document.body.appendChild(newdiv);

new Awesomplete(
	newdiv.querySelector('input'), 
  { list: document.querySelector('#productinputselect') }
);

＆＃13;

<script src="https://leaverou.github.io/awesomplete/awesomplete.js"></script>
<datalist id="productinputselect">
	<option>Ada</option>
	<option>Java</option>
	<option>JavaScript</option>
	<option>Brainfuck</option>
	<option>LOLCODE</option>
	<option>Node.js</option>
	<option>Ruby on Rails</option>
</datalist>

＆＃13;

顺便提一下，我删除了新输入元素中的id=""属性，因为ID属性必须是唯一的。

根据Awesomplete API documentation

回答

来自awesomeplete的自动完成功能在javascript中在额外创建的输入字段中不起作用

1 个答案: