读取 Javascript 本地存储以填充自动完成功能答案

【问题标题】：Reading Javascript local storage to populate autocomplete读取 Javascript 本地存储以填充自动完成功能
【发布时间】：2014-12-07 09:14:38
【问题描述】：

我需要自动完成表单中的文本字段。自动完成的数据会不时改变，所以我想自动填充自动完成。这将在没有网络访问的情况下独立运行，所以我需要一个客户端解决方案。让用户为自动填充选择一个文件是不可能的，所以我编写了一个 .js 文件，该文件创建一个 JSON 对象，其中包含用于填充自动完成的数据，以及与字段选择相关的其他数据。

如果我给它一个简单的数组，我知道自动完成工作：

$(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 });
});

但是，当我从 .js 文件中读取数据时，事情变得非常奇怪。这是我正在使用的代码：

$(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');
})

通过取消对 autocomplete 行上方的 document.write 的注释，我可以看到变量 cityList 与第一个示例中输入的数组完全相同。通过取消注释两个 document.write 行，我可以看到它们都被写入，因此代码不会挂在自动完成上。但是，如果我取消注释其中一个或两个 document.write 行，则表单永远不会出现在屏幕上。我相信我提到过它变得很奇怪。

我真正的问题不在于那种怪异。我真正的问题是自动完成永远不会填充，尽管我的解决方案与 tutorialspoint.com/jqueryui/jqueryui_autocomplete.htm 上的解决方案非常相似。我真的很感激任何关于我的问题的见解。

如果有人能解释 document.write 行的怪异之处，我也很感兴趣。

我已经发布了两个版本。第一个是http://mccalip.com/problem/index.html。问题版本在http://mccalip.com/problem/problem.html。

【问题讨论】：

第二次定义数组的方式很奇怪..
citiesData 方法在哪里..？它甚至是一种方法..？你能告诉我们你在哪里找到像localStorage.getItem( ['cityData']) 这样的语法，以及你期望它做什么......？
顺便说一下，var cityList = '[]' 是一个字符串，而不是一个数组。你可能正在寻找Array.push()
var city = JSON.parse(localStorage.getItem(['cityData']));来自htmldog.com/guides/javascript/advanced/localstorage，效果很好。 cityData 位于中，您可以在 mccalip.com/problem/problem.html 的示例中找到它。
事实证明@TJ 关于使用推送而不是连接是正确的。

标签： javascript jquery json jquery-ui autocomplete

【解决方案1】：

这是有效的代码：

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

readCity() 是一个创建二维数组 arrayCity 的函数。数组中的每一行都有城市名称，后跟其他数据。

我只需要数组中的城市名称用于自动完成功能，因此我循环遍历 arrayCity 并将名称推入一维数组 cityList。

【讨论】：