Jquery autocomplete on appended input fields

Question

I use Jquery autocomplete to query a DB. The function is bound to all text fields with the class "completeme_accounts". That works fine for the default text field, which is present when the page loads. However, when I add more text fields via Jquery, autocomplete doesn't work on them. I've checked several similar solutions here, but I can't find a solution that works with my code. I'm guessing I need to use Jquery .on (since live is deprecated) but I don't know how. My code:

$(document).ready(function(){ 

$(function() {
    function log( message ) {
        $( "<div>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 0 );
    }

    $( ".completeme_accounts" ).autocomplete({
        mustMatch: true,
        source: "accounts_autocomplete.php",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value );
        },
        change: function (event, ui) {
            if (!ui.item) {
                 $(this).val('');
             }
        }
    });
});

}); // Doc ready

Table with input fields:

<table id="addaccount">
<tr>
<td><div class="ui-widget"><input name="account[1]" type="text" class="completeme_accounts" id="account1" value=""></div></td>
<td><input type="radio" name="source" id="radio" value="radio" class="required"></td>
</tr>
<tr>
<td colspan="2"><a href="#" id="addrow" onclick="return false;">Add another account</a></td>
</tr>
</table>

Script to append extra input fields:

<script>
$rowid = 1;
$("#addrow").on("click", function(){
$rowid = $rowid + 1;
$('#addaccount tr:last').before('<tr><td><div class="ui-widget"><input name="account['+$rowid+']" type="text" class="completeme_accounts" id="account'+$rowid+'" value=""></div></td><td><input type="radio" name="payment_source" id="radio" value="radio" class="required"></td></tr>');
});
</script>

This isn't really a situation where `.on` helps, because there's no event to trigger on. You just have to have the code that appends the new field enable autocomplete on it after appending. — Barmar, Jan 28 '13 at 23:04
possible duplicate of [Autocomplete on appended field in JQuery](http://stackoverflow.com/questions/786117/autocomplete-on-appended-field-in-jquery) — zb', Jan 28 '13 at 23:06
@Barmar Thanks, that helped me understand .on a little better. — Renie, Jan 29 '13 at 10:54
@eicto I didn't see that thread before! I'm going to try implementing that solution with my code. — Renie, Jan 29 '13 at 10:56

score 0 · Answer 1 · answered Jan 28 '13 at 23:04

0

I'm not sure what exactly you're trying to do in that script but if you want to change the possible values for the auto complete you can do something like this:

$( "#tags" ).autocomplete( "option", "source",["the", "values", "you", "want"]);

answered Jan 28 '13 at 23:04

Tomer Arazy

1,833
10
15

Ashutosh Sharma · Answer 2 · 2018-07-27T05:29:26.640

Before you append the text box, DOM is already loaded so the autocomplete not initiated on appended inputs.

You have to initiate autocomplete again on appended inputs.
Add a class to div .append_input

<div class="ui-widget append_input">
  <input name="account['+$rowid+']" type="text" class="completeme_accounts" 
  id="account'+$rowid+'" value="">
</div>

Initiate autocomplete again

var appendInput = $(this).closest('#addaccount').find('.append_input').children('.completeme_accounts');
appendInput.autocomplete(yourcode);

See this answer

Jquery autocomplete on appended input fields

2 Answers2