CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocomplete
Mikkel Lindberg
Mikkel Lindberg

Reputation: 3

append line add autocomplete jQuery

I have made an autocomplete on a form where its possible to add new line.

However my autocomplete locks only to the first item.

Can you help me getting the autocomplete to work on appended lines.

jsFiddle: https://jsfiddle.net/r65x9aj0/3/

Javascript:

var globalNewIndex = 0;
var availableAttributes = [
  "account_address",
  "account_address_city",
  "account_address_country",
  "account_address_state",
  "account_address_street1",
  "account_address_street2",
  "account_address_zip",
  "account_email",
  "account_login",
  "account_name",
  "account_number",
  "account_telephone"
];



$(document).ready(function() {
    $('#fixed_name_'+globalNewIndex).autocomplete({
            source: availableAttributes
        }); 
    $("#add").click(function() {
        var newIndex = globalNewIndex+1;
        var changeIds = function(i, val) {
            return val.replace(globalNewIndex,newIndex);
        }

        $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
        $('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds );

           globalNewIndex++;
         $('#fixed_name_'+globalNewIndex).autocomplete({
            source: availableAttributes
        });    
        $('#mytable tbody>tr:last .emptythis').val('');
        $("#mytable tbody>tr:last").each(function() {this.reset();});

      return false;
    });
});

HTML:

<table id="mytable" class="table table-hover">
    <thead>
        <tr style="font-weight: bold">
            <td>Item number
            </td>
            <td>Price EUR
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="person">
            <td>
                <input type="text" name="fixed_name[0]" id="fixed_name_0" class="form-control emptythis" autocomplete="off" />
            </td>
            <td>
                <input type="number" name="fixed_price[0]" id="fixed_price_0" class="form-control emptythis" autocomplete="off" />
            </td>
        </tr>
    </tbody>
</table>
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-success btn-block btn-lg" id="add">Add line
        </button>
    </div>
    <div class="col-md-9">
        <button type="submit" class="btn btn-primary btn-block btn-lg" id="searchinternal">Update
        </button>
    </div>
</div>
</form>

Upvotes: 0

Views: 157

Answers (3)

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

It is not working because of you are adding the textbox dynamically and for dynamic html the autocomplete is instantiate in different way like:

var selector = '.searchInput';
$(document).on('keydown.autocomplete', selector, function() {
    $(this).autocomplete(options);
});

Upvotes: 0

Dipiks
Dipiks

Reputation: 3928

Here is an updated jsfiddle following your code:

Updated fiddle

I initialized Autocomplete dynamically and created a template for the new row because the clone function cloned the instance of autcomplete, which is not good.

Here is your new javascript:

$(document).ready(function() {
  $(document).on('keydown.autocomplete', '#mytable tbody>tr:last input', function() {
      $(this).autocomplete({
            source: availableAttributes
        });
  });
    $("#add").click(function() {
        var newIndex = globalNewIndex+1;
        var changeIds = function(i, val) {
            return val.replace(globalNewIndex,newIndex);
        }
        var $newRow = $('<tr class="person"><td><input type="text" class="form-control emptythis ui-autocomplete-input" autocomplete="off"></td><td><input type="number" name="fixed_price[1]" id="fixed_price_1" class="form-control emptythis" autocomplete="off"></td></tr>');
        $newRow.insertAfter('#mytable tbody>tr:last');
        $('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds);
           globalNewIndex++;
        $('#mytable tbody>tr:last .emptythis').val('');
        $("#mytable tbody>tr:last").each(function() {this.reset();});

      return false;
    });
});

Upvotes: 1

Angelo Michel
Angelo Michel

Reputation: 265

    // previous code
    $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
    $('#mytable tbody>tr:last input').attr('name', changeIds ).attr('id', changeIds );


    // changed lines of code
    var $newRow = $('<tr>' + $('#mytable tbody>tr:first').html() + '</tr>');
    $newRow.find('input').attr('name', changeIds ).attr('id', changeIds );
    $('#mytable tbody').append($newRow);

The code didn't work because of the clone(true). I would suggest a 'template' function for the row though.

As for the previous comment, I would not suggest putting it .on('keypress', ... because this gets fired every time you press a key (you can however listen only 'once' with one, but this won't solve your issue, since it won't get fired the 'second' time then).

Upvotes: 0

Related Questions