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

Autocomplete function from awesomeplete does not work in additionally created input fields by javascript

本文关键字：创建 输入 不起作用 字段 javascript 全功能 awesomeplete      更新时间：2023-09-26

我有一个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=" awescomplete "随处可见。如何使这个函数在所有添加的输入字段中工作?

您的awescomplete已经为所有.awesomplete类元素加载。

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

else语句应该是这样的

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++;
  }
}

这里有一个工作示例

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') }
);
<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>

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

基于awescomplete API文档的答案

相关文章：