Leaflet GeoJSON and JQuery Autocomplete issue

Question

I am using jquery autocomplete to search polygons. the JQuery UI uses an array as a data source. I created 4 arrays, the first 3 for each of the three GeoJSON layers. They load okay. Then I concat them into the 4th array, which I hoped to be my data source for the Jquery UI.

However it fails to work. The GeoJSON is async and appears to load their array after the JQuery UI loads. So the autocomplete doesn't get the array data source.

What I need is to have all three layers arrays complete and combined, then to fire off the JQuery UI using this as it's source. I looked at chaining promises but that's beyond me.

var arr = [];
var arr1 = [];
var arr2 = [];
var arr3 = [];

var senate = L.geoJSON(null, {onEachFeature: forEachFeature, style: style2}).addTo(map);
$.getJSON(url, function(data) {
senate.addData(data);

for (i = 0; i < data.features.length; i++) {
    arr1.push({name:data.features[i].properties.NAME, Dist:data.features[i].properties.DISTRICT, Data:"senate"});
}
    console.log(arr1.length +" records in senate");
});

var assembly = L.geoJSON(null, {onEachFeature: forEachFeature, style: style2}); 
$.getJSON(url2, function(data) {
    assembly.addData(data);

    for (i = 0; i < data.features.length; i++) {
        arr2.push({name:data.features[i].properties.NAME, Dist:data.features[i].properties.DISTRICT, Data:"assembly"});
    }
    console.log(arr2.length +" records in assembly");
});

var congress = L.geoJSON(null, {onEachFeature: forEachFeature, style: style2}); 
$.getJSON(url3, function(data) {
    congress.addData(data);

    for (i = 0; i < data.features.length; i++) {
        arr3.push({name:data.features[i].properties.NAME, Dist:data.features[i].properties.DISTRICT, Data:"congress"});
    }
    console.log(arr3.length +" records in congress");
});

console.log(" Records in assembly 240");
var arr = arr1.concat(arr2, arr3);
console.log(arr.length +" records combined should be 240");

// Jquery fails as no data in the source.    //$( function() {   
// $(document).ready(function(){     //$(window).bind("load", function() {
document.addEventListener("DOMContentLoaded", function(event){
console.log(arr.length +' Data in array - jquery'); 
var availableTags = [];

for (i = 0; i < arr.length; i++) {

My console.logs shows the order:

Records in assembly 240
0 records combined should be 240  << before JQuery
0 Data in array - jquery  <<shows Autocomplete has no data
27 records in congress  << No GeoJSON data loading
63 records in senate
150 records in assembly

Answer 1

You could indeed try using Promises to wait for all your data to arrive from your AJAX ($.getJSON) calls before initializing your jQuery UI's autocomplete with the complete source.

But an easier approach would be simply to update the autocomplete source whenever new data arrives. The jQuery UI autocomplete widget accepts dynamically changing the source option:

$( "#autocomplete" ).autocomplete("option", "source", newValue);

Therefore in your case, within each $.getJSON callback, you would rebuild your arr concatenated array and rebuild the autocomplete source, and call the above statement with that new source as newValue.

Do not forget to initialize your autocomplete first, even with empty source:

$( "#autocomplete" ).autocomplete();

Demo: https://plnkr.co/edit/6zBb9Qt6NOcEXuJooYfK?p=preview