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

时间:2017-12-04 18:42:32

标签: javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

我还在学习javascriptJquery。我用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(),但我想我不能在这里使用它,或者我不知道如何使用它。

感谢您的帮助。

度过美好的一天!

1 个答案:

答案 0 :(得分:0)

由于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">

希望这有帮助