Jquery自动完成动态创建的输入

Posted 2021-05-02

我还在学习javascript和Jquery。我用jQuery创建简单的autocomplete：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>	
	  
<script>
  $(function() {
    $( "#nazov" ).autocomplete({
		minLength: 2,
		source: 'private/search.php',
	
	select: function(event, ui) {
    document.getElementById("pocet").value = ui.item.pocet;

  }	
    });
	
	
  });

  <label for="nazov">Názov: </label>
  <input id="nazov">
  <input id="pocet">

我有一些基本的JS函数来创建输入。每个新输入都有id="nazov"但是自动完成仅适用于非动态输入，并且每个动态创建的新输入都不起作用。

我认为这是因为自动完成功能不知道新的输入。是否可以通过任何方式更改自动填充以查找新输入并自动完成每个输入具有不同的回报？我发现了一些不赞成使用的功能.live()和.on()，但我想我不能在这里使用它，或者我不知道如何使用它。

谢谢你的帮助。

祝你今天愉快！

答案

由于ID是唯一的，因此您不应分配ID两次。请改为使用类。所以你的代码看起来像这样：

JS：

$(function() {
    $(".nazov").autocomplete({
    minLength: 2,
    source: 'private/search.php',

    select: function(event, ui) {
        document.getElementByClass("pocet").value = ui.item.pocet;
    }
  });
});

html：

<label for="nazov">Názov: </label>
<input class="nazov">
<input class="pocet">

希望这可以帮助