Question

自动完成第一个输入元素的完美工作

<input type="text" id="inp01"></input>

但在此输入自动完成的克隆不适用于新

之后

<input type="text" id="inp02"></input>
autocm("inp02");

我的自动填充功能是

function autocm(inputID){
  //tempdata have an array of strings
  $(document.body).find("#" + inputID).autocomplete({
        source: tempData
  });
};

Answer 1

请参阅下面的代码片段，其中我使用了jQuery UI以及jQuery UI自动完成功能。功能有效，请忽略丢失的样式，您可以轻松修复它。

工作原理：

首先，我克隆了输入元素，然后在其上重新绑定自动完成，然后在其上启用autocomplete。您感兴趣的片段如下：

    $(tag2).autocomplete({
        source: availableTags
    }).autocomplete('enable');

您可以运行并测试代码段。请告知我们是否适合您。

示例运行

运行Run code snippet
点击Try clone and bind。默认情况下，您将看到带有clone-*值的输入字段。这里*将增加数字2,3,4等。
点击clone-2并尝试将值更改为以a，b开头的内容。您会在字段中看到自动填充功能。

尝试研究代码并根据您的需要进行调整。如果您仍然对此感到困惑，请告诉我们。

＆＃13;

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
  
    $("#tags").autocomplete({
      source: availableTags
    });
    
    var count   = 1;
    var cloneId = 'clone-';
    
    $('#tryClone').on('click', function() {
        var tag2 = $('#tags').clone();
        tag2.removeAttr("id");
        
        count += 1;
      
        var elementId = cloneId + count;
   
        $(tag2).attr("id", elementId).val(elementId);
        
        $(tag2).autocomplete({
            source: availableTags
        }).autocomplete('enable');
        

        $(tag2).appendTo('#container');
    });
    
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
  
  <div id="container">
  </div>
  
  <button id="tryClone">
      Try clone and bind
  </button>
</div>

＆＃13;

Answer 2

挖掘后我找到了这个解决方案。

自动填充将一个类添加到输入元素。
当我们克隆输入元素时，那个类也已经出现了。
所以在初始化自动完成到克隆元素之前，我们首先需要删除该类“ui-autocomplete-input”;
然后在该输入上调用自动完成功能。

自动完成无法处理克隆的输入元素

2 个答案: