Autocomplete not working on cloned input element

Question

Autocomplete working perfect on first input element

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

but after making clone of this input autocomplete not working for new

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

my autocomplete function is

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

then i think you should use delegate() for this its work fine — Mayank Vadiya, Sep 20 '16 at 13:22
You have tagged `angularJs` as well. Which autocomplete library you are using? Can you create [jsfiiddle.net](http://jsfiddle.net/) example? Please update your question with information asked and we'll try to help you with possible answers. — Samundra, Sep 20 '16 at 13:26
If you want to for all then you need to add `class` instead of `id` — Mayank Vadiya, Sep 20 '16 at 13:35
@Samundra i am using jquery ui autocomplete. and both input element have different id so why i do i have an class on input. — Sumit Kumar, Sep 20 '16 at 13:40
May be you need to bind autocomplete event to work on dynamically created elements. Something like this http://stackoverflow.com/a/8211263/6608101 — Mohit Tanwani, Sep 20 '16 at 13:50
@Loading.. i have already tried that solution but it stil filter values as per first input — Sumit Kumar, Sep 20 '16 at 13:54
Please see that answer that I have updated. You can `Run code snippet` attached and see the working example. Please let us know whether it worked for you or not. — Samundra, Sep 20 '16 at 14:25
After some digging i got the solution. we first need to remove autocomplete class from cloned element then again bind autocomplete. then this works fine. Anyway thanx guys. — Sumit Kumar, Sep 21 '16 at 10:06

score 1 · Answer 1 · edited Oct 01 '16 at 05:59

See the code snippet below, where I have used the jQuery UI along with jQuery UI autocomplete. The functionality works, Please ignore the missing style, you can easily fix it.

How it works:

At first, I cloned the input element and then rebind the autocomplete on it and then enable autocomplete on it. The snippet that you are interested is as follows:

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

You can run and test the snippet. Please let us know whether it works for you or not.

Sample Run

Run the Run code snippet
Click on Try clone and bind. You will see input field with clone-* value by default. Here * will be incrementing numbers 2, 3, 4 etc.
Click on clone-2 and try to change value to something starting with a, b. You will see autocomplete appearing on the fields.

Try to study the code and tweak it to your need. Let us know if you still feel confused on it.

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

Thanx @Samundra but this does't solve my problem. after some digging i got solution that first i need to remove autocomplete class from that element then again bind autocomplete. — Sumit Kumar, Sep 21 '16 at 10:05
That's great. You found solution. By the way, the autocomplete plugin should have removed the `autocomplete` class by itself when its `close` event gets fired. — Samundra, Sep 21 '16 at 10:18
No its not removed class. its just disable the autocomplete widget for that input element — Sumit Kumar, Sep 21 '16 at 10:22
I agree. When I tested the autocomplete, input element had extra attribute `autocomplete=off` for cloned input. — Samundra, Sep 21 '16 at 10:24

score 1 · Accepted Answer · answered Sep 21 '16 at 11:24

After digging i found this solution.

Autocomplete add an class to a input element.
When we cloned input element then that class also present already.
so before initialise autocomplete to an cloned element we first need to remove that class "ui-autocomplete-input";
then call autocomplete function on that input.

Autocomplete not working on cloned input element

2 Answers2

Linked