Working on dynamically added input elements with Typeahead

Question

This is my code in adding rows which also have the class='form-control mybur':

$("body").on("click", "#add_row_bur", function() {
    $("#bur" + o).html("<td><input type='text' name='bur_account_code[]' placeholder='Account Code' class='form-control mybur' data-provide='typeahead' id='account_code" + o + "'  required/><td>;
    $("#tab_logic_bur").append('<tr id="bur' + (o + 1) + '"></tr>');
    o++
});
$("body").on("click", "#delete_row_bur", function() {
    if (o > 1) {
        $("#bur" + (o - 1)).html("");
        o--
    }
});

I tried implementing typeahead on it but it doesn't work. I tried using this answers ( answer 1, answer 2), but still fails.

Here's my code:

var objects = [];
var map = {};
$('input.mybur').typeahead({
    source: function(query, process) {
        $.ajax({
            url: 'proc_php/get_account_code.php',
            type: 'POST',
            dataType: 'JSON',
            async: true,
            success: function(data) {
                objects = [];
                map = {};
                $.each(data, function(i, object) {
                    map[object.description] = object;
                    objects.push(object.description);
                });
                process(objects);
            }
        });
    },
    updater: function(item) {
        $('input.mybur').blur(function() {
            $(this).val(map[item].code);
        });

        return item;
    }
});

I deleted all the code that I tried. Again, this will work on a pre-created elements:

<input type="text" name='bur_account_code[]' placeholder='Account Code' class="form-control mybur" data-provide="typeahead" required/>

Answer 1

The problem is for the dynamically added input elements, you need to initialize the plugin after they are created.

So one solution is first create a method which can be reused to initialize the plugin for a passed set of elements like

var objects = [];
var map = {};

function createTypeahead($els) {
    $els.typeahead({
        source: function (query, process) {
            $.ajax({
                url: 'proc_php/get_account_code.php',
                type: 'POST',
                dataType: 'JSON',
                async: true,
                success: function (data) {
                    objects = [];
                    map = {};
                    $.each(data, function (i, object) {
                        map[object.description] = object;
                        objects.push(object.description);
                    });
                    process(objects);
                }
            });
        },
        updater: function (item) {
            $('input.mybur').blur(function () {
                $(this).val(map[item].code);
            });

            return item;
        }
    });
}

//for the already present elements
createTypeahead($('input.mybur'));

then in the add new element code

$("body").on("click", "#add_row_bur", function() {
    var $td = $("<td><input type='text' name='bur_account_code[]' placeholder='Account Code' class='form-control mybur' data-provide='typeahead' id='account_code" + o + "'  required/><td>")
    $("#bur" + o).html($td);
    $("#tab_logic_bur").append('<tr id="bur' + (o + 1) + '"></tr>');
    o++
        createTypeahead($td.find('input.mybur'));
});
$("body").on("click", "#delete_row_bur", function() {
    if (o > 1) {
        $("#bur" + (o - 1)).html("");
        o--
    }
});