自動完成工作不克隆輸入元素上

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>