jQuery Autocomplete on Dynamically new rows

Question

Issue: The (jQuery) auto-complete works only for the first input (displayed by default). It doesn't work for additional row/s which are added using the add row function.

I have read other posts and understood that I have to use class and not id. But it still doesn't work.

I am using jquery autocomplete and some javascript to add and delete rows for a specific id.

Here is the headers:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Here is the jquery code:

jQuery(document).ready(function ($) {

  /*  availableTags = [
        "Demo",
        "Senna",
        "Adam",
        "Eva",

    ];*/

    $('.autofill').autocomplete({
        source:'suggest.php', minLength:2
    });
});

Here is the HTML code:

    <div class="content-left">
    <a href="#" id="addScnt">Add rows</a>

        <div id="p_scents">
            <p>
                <label style="margin-bottom:10px;" for="p_scnts">
                    <input class="autofill" type="text" id="p_scnt" size="20" name="p_scnt[]"
                    value="" placeholder="Enter text" />
                </label>
            </p>
        </div>
    </div>

**Here is the Javascript to add rows:** 

$(function () {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function () {
        $('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill"  type="text" name="p_scnt[]" size="20" id="p_scnt_' + i + '" value=""  placeholder="Add text"       /></label  for="remScnt"> <label style="padding-left:400px;"><a href="#" id="remScnt">Remove</a></label></p>').appendTo(scntDiv);
        //i++;
        //return false;

        //Added the 5 lines below

        $(function ($) {
            $('#p_scnt_' + i).autocomplete({
            source:'suggest.php', minLength:2
            });
        });
        i++;
        return false;

    });

    $('#remScnt').on('click', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

So the above code is working fine. Cheers all for your help ;)

Try using .on() instead of .live(). The .live() function is deprecated as of jQuery 1.7. You should also post a js fiddle for this and people will be able to help you a lot easier. — user1048676
– user1048676, Commented Mar 10, 2013 at 12:53
I tried the .on() instead of .live() but I still have the same issue i.e. autocomplete works only for the first row. I haven't used js fiddle but will try to set up one. — Adam
– Adam, Commented Mar 10, 2013 at 13:00

inDream · Accepted Answer · 2013-03-10 14:55:48Z

3

For your latest code, you've made two mistakes:

Increase the counter i before apply autocomplete to text field
Stopped the script by return false

Also, it's recommended to use .on() to replace .live() as it's deprecated in version 1.7 .

Demo: http://jsfiddle.net/indream/f8mt4/

$('#addScnt').on('click', function () {
    $(...).appendTo(scntDiv);
    //i++; Should not be done here
    //return false; Stopped the script

    //Added the 5 lines below

    $(function ($) {
        $('#p_scnt_' + i).autocomplete({
            source: window.availableTags,
            minLength: 1
        });
    });
    i++; // should increase counter here
    return false;

});

p.s. I've changed availableTags to global variable in order to make the demo works,
but I think you would use query to retrieve the tags.

answered Mar 10, 2013 at 14:55

inDream

1,28710 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Over a year ago

Thanks for the answer and yes the autocomplete works fine now but now I cannot remove the added rows? Btw also when I have other code in the same site then after I add a row then the screen scrolls up to the top (as if something was submitted) and the autocomplete for the added row does not work?

inDream Over a year ago

Demo updated. I've missed to add option for .on() to replace .live(). You should use class for remove buttons and try event.preventDefault() or event.stopPropagation() to stop the scroll. I don't understand your last sentence, when will the autocomplete don't work?

mOna Over a year ago

@inDream: I had the same question and your answer helped me a lot. Just my problem is that I don't know what should I do when I have more than one multiple autocomplete. I mean I need one for list of actornames, another one for directorname. and in both cases I need more than one suggestion like your answer. could you please help me?

PSR · Accepted Answer · 2013-03-10 14:24:15Z

1

$('#addScnt').live('click', function() {
  .........................

$('#p_scnt_'+i).autocomplete({
  source:'suggest_fill.php', 
  minLength:1  
});


 return false;
  ..................
});

edited Mar 10, 2013 at 14:24

answered Mar 10, 2013 at 12:54

PSR

40.4k43 gold badges115 silver badges154 bronze badges

7 Comments

Adam Over a year ago

I am not an expert on jquery so could you please be more specific and maybe write out a short code?

Adam Over a year ago

I am assuming you meant the javascript changes that you suggested so I have edited my initial code accordingly (see above)

Adam Over a year ago

unfortunately still not. Appreciate your help though!

Adam Over a year ago

I had to keep the initial return false as well as it would else not keep me on the same spot on the site

PSR Over a year ago

can u remove initial return false

|

alsotang · Accepted Answer · 2013-03-10 13:08:29Z

0

I think it's the sequence of js file load problem.

Try to put your second file above the 1st file.

Hope it helps you.

answered Mar 10, 2013 at 13:08

alsotang

1,6071 gold badge15 silver badges15 bronze badges

1 Comment

Adam Over a year ago

I tried moving the javascript above the jquery and also the sequence to make jquery first, javascript second and html third. But it still does not work.

lordvlad · Accepted Answer · 2013-03-10 14:19:12Z

the second $(function(){is too much. it should look like this

<script>
$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('#addScnt').live('click', function() {
    $('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill"  type="text" name="p_scnt[]" size="20" id="p_scnt_' + i +'" value=""  placeholder="Add text"       /></label  for="remScnt"> <label style="padding-left:400px;"><a href="#" id="remScnt"><img src="../../img/remove.jpg" width=""  height=""  class="img"  alt=""  title=""/></a></label></p>').appendTo(scntDiv);
    i++;   

    //Added the 5 lines below    

    $('#p_scnt_'+i).autocomplete({
      source:'suggest_fill.php', 
      minLength:1  
    });
  return false;
  });

  $('#remScnt').live('click', function() {
    if( i > 2 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});
</script>

Collectives™ on Stack Overflow

jQuery Autocomplete on Dynamically new rows

4 Answers 4

3 Comments

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related