从JSON文件中提取数据到Javascript中，用作web表单输入中的自动完成

Extracting data from JSON file into Javascript for use as autocomplete in a web form input

本文关键字：输入 表单 web 提取 文件 JSON 数据 Javascript 用作      更新时间：2023-09-26

我不经常使用Javascript，因此我的知识非常非常有限。

我有一个JSON文件(airports. JSON)，其中列出了机场的iata代码，名称，城市和国家:

[
{
    "iata": "CPT",
    "name": "Cape Town International Airport",
    "city": "Cape Town",
    "country": "South Africa"
},
{
    "iata": "JNB",
    "name": "OR Tambo International Airport",
    "city": "Johannesburg",
    "country": "South Africa"
},
{
    "iata": "DUR",
    "name": "King Shaka International Airport",
    "city": "Durban",
    "country": "South Africa"
},
]

我想使用该信息在Javascript文件(method.js)中提取它，该文件接受信息并解析它以返回给用户。当用户开始输入IATA代码、城市或国家时，脚本文件必须搜索不同的变量("IATA"、"名称"、"城市"、"国家")，并在自动完成下拉框中编译结果，如下所示:

开普敦，开普敦国际机场(CPT)，南非

或者在编码术语中(类似于这样):

city + ', ' + name + '(' + iata + '), ' + country,

但是当用户点击结果[onSelect]时，输入字段必须只有以下内容:

开普敦(CPT)

或者，在编码术语中(类似于这样):

city + '(' + iata + ')'

我如何从。json文件到。js文件的信息，并使用它来自定义构建我自己的结果?

第一部分将使用ajax获取数据。因为它是一个静态数据文件加载它一次，然后在ajax回调初始化autocomplete和传递数据数组的插件。

$.getJSON('yourdata.json', function(response){
    var mappedData = $.map(response , function(){ /* up to you to map it*/ })
    $('.airportFrom input').autocomplete({
        lookup: mappedData ,
        .......
    });
    // other autocomplete
});

由于您正在使用JQuery，您可以使用$。getJSON方法从机场检索json数据。json文件。

$.getJson():看看它是如何工作的

记住将自动完成代码放在success函数中，这样代码才会在ajax调用完成后运行。比如:

$.getJSON("/airports.json")
.success(function( data ) {
    var airportArray = data; // here you get your airport.json data and assing it to your array variable. The data will already be in json format
    // HERE YOU PUT YOUR AUTOCOMPLETE CODE SO YOU CAN USE THE DATA RETRIVIED
})
.error(function(){
    // here you handle the error with the ajax call (doc does not exist, the server does not respond...
});
相关文章：