Why newly added inputs are not calling autocomplete function?

Question

I have implemented autocomplete function on one input in view correctly now I want to allow users to add more inputs by (add button in js) the problem is newly added inputs are not calling autocomplete function why?

Auto complete function

$(document).ready(function () {
            $(".AOI").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Test/SearchAOI",
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.AOIName, value: item.AOIName };
                            }))

                        }
                    })
                },
                messages: {
                    noResults: '',
                    results: function (resultsCount) { }
                }
            });
        })

function to enable users to add more inputs

var areaIndex = "b";
        $("#addAOI").click(function () {
            //create the elements representing the new object, giving them a fake indexer
            areaIndex = areaIndex + "b";
            $("#AOIFields").append("<td><input type='hidden' name='AOI.Index' value='"+areaIndex+"' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI["+areaIndex+"]' /></td>");
        })

part of view

         <input type="hidden" name="AOI.Index" value="123"style="display:none"/>

                        <input type="text" class="form-control AOI" name="AOI[123]" />
                    </td>
                </tr>

You need to instantiate the `autocomplete()` logic on the newly appended elements. You currently only apply it to the elements which are in the DOM when it loads. — Rory McCrossan, Apr 17 '18 at 08:32
Events are only assigned to items that exist at the time that the assignment was made. More info here: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Apr 17 '18 at 08:32
thanks @Rory McCrossan this is right! can you please write your comment as answer so I can accept it? — programmer, Apr 17 '18 at 09:36

score 1 · Answer 1 · answered Apr 17 '18 at 09:41

you need to bind autocomplete to new add element, so you can do

$("#addAOI").click(function () {
    //create the elements representing the new object, giving them a fake indexer
    areaIndex = areaIndex + "b";
    var $container = $("#AOIFields");
    $container.append("<td><input type='hidden' name='AOI.Index' value='"+areaIndex+"' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI["+areaIndex+"]' /></td>");
    $container.find(".AOI").last().autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Test/SearchAOI",
                type: "POST",
                dataType: "json",
                data: { Prefix: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.AOIName, value: item.AOIName };
                    }))

                }
            })
        },
        messages: {
            noResults: '',
            results: function (resultsCount) { }
        }
    });
})

for better result, you might store autocomplete options in a var

score 0 · Accepted Answer · answered Apr 17 '18 at 09:41

You need to instantiate the autocomplete() logic on the newly appended elements. You currently only apply it to the elements which are in the DOM when it loads.

The simplest way to do this would be to extract the autocomplete logic to its own function which you call as required, something like this:

function defineAutoComplete($parent) {
  $parent.find(".AOI").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "/Test/SearchAOI",
        type: "POST",
        dataType: "json",
        data: {
          Prefix: request.term
        },
        success: function(data) {
          response($.map(data, function(item) {
            return {
              label: item.AOIName,
              value: item.AOIName
            };
          }));
        }
      })
    },
    messages: {
      noResults: '',
      results: function(resultsCount) {}
    }
  });
}

// on load:
defineAutoComplete($(document));

// on click:
$("#addAOI").click(function() {
  areaIndex = areaIndex + "b";
  var $html = $("<td><input type='hidden' name='AOI.Index' value='" + areaIndex + "' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI[" + areaIndex + "]' /></td>").appendTo('#AOIFields');
  defineAutoComplete($html)
})

Why newly added inputs are not calling autocomplete function?

2 Answers2