自动完成工作不克隆输入元素上

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

挖后，我发现这个解决方案。

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

Answer 2

查看代码片段下面，我已经使用了jQuery UI以及jQuery UI自动完成功能。该功能起作用，请忽略缺失的样式，您可以轻松修复它。

它是如何工作：

起初，我克隆输入元素，然后重新绑定就可以自动完成，并打开它autocomplete。您感兴趣的代码片段如下：

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

您可以运行并测试代码段。请让我们知道它是否适用于您。

样品试验

1. 运行Run code snippet
2. 点击Try clone and bind。默认情况下，您将看到输入字段值为clone-*。这里*会递增数字2,3,4等
3. 点击clone-2并尝试将值更改为以a,b开头的值。你会看到自动完成出现在字段上。

尝试研究代码并将其调整为您的需要。让我们知道你是否仍然感到困惑。

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

<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>