[methuselah90]

Twitter Typeahead only seems works with elements called when the page loads (and not the dynamically created stuff made by methods like addWaypoint). How would I resolve this? Rest of my code is below:

$(document).ready(function () {
    // Add waypoints
    $('#add-waypoint-button').click(function () {
        var n = $('#waypoints input').length;
        addWaypoint(n);
    });

    // Address lookup
    addressLookup();
});

function addWaypoint(waypointCount)
{
    if(waypointCount < 4) {
        $('#waypoints-page #waypoints').append('<div class="waypoint-container"><input type="text" class="form-control booking waypoint" placeholder="Via"><label class="remove-waypoint-button" for=""><i class="fa fa-times"></i></label><hr></div>');
        if ($(window).height() <= 568) {
                $('.form-control').removeClass('input-sm');
                $('.form-control').removeClass('input-lg'); 
                $('.form-control').addClass('input-sm');
            }
            else {
                $('.form-control').removeClass('input-sm');
                $('.form-control').removeClass('input-lg'); 
                $('.form-control').addClass('input-lg');
            }
        }
}

function addressLookup() {
    // Instantiate the Bloodhound suggestion engine
    var addressLookup = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 5,
        prefetch: {
            url: 'assets/data/countries.json',
            filter: function (list) {
                // Map the remote source JSON array to a Javascript object array
                return $.map(list, function (addressLookup) {
                    return {
                        name: addressLookup
                    };
                });
            }
        }
    }); 
    // Initialize the Bloodhound suggestion engine
    addressLookup.initialize(); 
    // Instantiate the Typeahead UI
    $('.book-journey-container #pickup, .book-journey-container #destination, .waypoint-container .waypoint').typeahead(null, {
        name: 'addressLookup',
        displayKey: 'name',
        source: addressLookup.ttAdapter()
    });
}

[ArtificialSoldier]

You'll need to run the typeahead method on any new elements that you add to the page. The documentation might show ways to do that. Maybe you could only register it with the new elements, or maybe you would remove it on everything then add it back, or maybe adding it again to existing elements wouldn't cause a problem.