Reading Javascript local storage to populate autocomplete

Question

I need to autocomplete a text field in a form. The data for the autocomplete will change from time to time, so I want to autopopulate the autocomplete. This will be running standalone with no net access, so I need a client side solution. Having the user select a file for the autopopulate is out of the question, so I wrote a .js file that creates a JSON object with the data to populate the autocomplete, as well as other data associated with the selection for the field.

I know the auto complete works if I give it a simple array:

$(function() {
    var cityList= ["Arlington Heights","Winnipeg","Miami Gardens","Louisville","Del Mar","Wilmington","Berkeley","Vancouver",]
//  var cityList= "Arlington Heights,Winnipeg,Miami Gardens,Louisville,Del Mar,Wilmington,Berkeley,Vancouver,"
    $( "#autocomp" ).autocomplete({ source: cityList });
});

However, when I read in the data from the .js file, things get really weird. This is the code I am using:

$(function() {
    citiesData ();
    var city = JSON.parse(localStorage.getItem( ['cityData']));
    var cityList = '[';
    for(var row in city) {
        cityList = cityList += '"' + city[row].city +'",';
    };
    cityList += ']';
//  document.write('<br />' + cityList);
    $( "#autocomp" ).autocomplete({ source: cityList });
//  document.write('<br />; checkpoint 1');
})

By uncommenting the document.write above the autocomplete line, I can see that the variable cityList is exactly the same as the array entered in the first example. By uncommenting both document.write lines, I can see that they each get written, so the code is not hanging on the autocomplete. However, if I uncomment either or both of the document.write lines, the form never appears on the screen. I believe I mentioned that it got weird.

My real problem is not with that weirdness. My real problem is that the autocomplete never populates, although my solution is very similar to the one at tutorialspoint.com/jqueryui/jqueryui_autocomplete.htm. I would really appreciate any insights into what my problem is with this.

I would also be interested if anyone can explain the weirdness about the document.write lines.

I have posted both versions. The first is at http://mccalip.com/problem/index.html . The problem version is at http://mccalip.com/problem/problem.html .

Answer 1

Here is the code that works:

$(function() {
    readCity();
        var cityList = new Array;
    for (var c in arrayCity) {
        cityList.push(arrayCity[c][0]);
    };
    $( "#autocomp" ).autocomplete({ source: cityList });
});

readCity() is a function that creates the 2D array, arrayCity. Each row in the array has the city name followed by other data.

I just need the city names in the array for the autocomplete function, so I loop through arrayCity and push the names into the 1D array, cityList.