2017-03-06 52 views
0

我试图使用http://easyautocomplete.com显示一个自动完成的文本字段。从JSON自动完成

它使用他们的演示效果很好。

他们JSON是显示这样

[ 
    {"name": "Afghanistan", "code": "AF"}, 
    {"name": "Aland Islands", "code": "AX"}, 
    {"name": "Albania", "code": "AL"}, 
    {"name": "Algeria", "code": "DZ"}, 
    {"name": "American Samoa", "code": "AS"}, 
    ... 
] 

凡为我的代码显示像

[ 
    { 
    "event": { 
     "id": "28139949", 
     "name": "Comp (FRA) 6th Mar", 
     "countryCode": "FR", 
     "timezone": "CET", 
     "venue": "Compiegne", 
     "openDate": "2017-03-06T12:15:00.000Z" 
    }, 
    "marketCount": 5 
    }, 
    { 
    "event": { 
     "id": "28139948", 
     "name": "Yarm (FC) 6th Mar", 
     "countryCode": "GB", 
     "timezone": "Europe\/London", 
     "venue": "Yarmouth", 
     "openDate": "2017-03-06T18:33:00.000Z" 
    }, 
    "marketCount": 11 
    }, 
    ... 
] 

对于工作上面是如下的一个演示代码:

var options = { 
    url: "resources/countries.json", 

    getValue: "name", 

    list: { 
     match: { 
      enabled: true 
     } 
    } 
}; 

我知道问题是因为我的'名称'字段在'事件'字段内,但我不知道如何使用targ等等。

有什么建议吗?

+0

你可以试试这个:https://jqueryui.com/autocomplete/按照以下步骤注明来源:availableTags =这包含值自动完成...你使用这个URL来检查JSON数据:[JSON VIEWER](http://jsonviewer.stack.hu/) – 2017-03-06 15:18:24

回答

1

通过地图调用运行你的数据对象:

const data = [ 
 
    { 
 
    "event": { 
 
     "id": "28139949", 
 
     "name": "Comp (FRA) 6th Mar", 
 
     "countryCode": "FR", 
 
     "timezone": "CET", 
 
     "venue": "Compiegne", 
 
     "openDate": "2017-03-06T12:15:00.000Z" 
 
    }, 
 
    "marketCount": 5 
 
    }, 
 
    { 
 
    "event": { 
 
     "id": "28139948", 
 
     "name": "Yarm (FC) 6th Mar", 
 
     "countryCode": "GB", 
 
     "timezone": "Europe\/London", 
 
     "venue": "Yarmouth", 
 
     "openDate": "2017-03-06T18:33:00.000Z" 
 
    }, 
 
    "marketCount": 11 
 
    } 
 
]; 
 

 
const newData = data.map(curr => { 
 
    return { 
 
    name: curr.event.name, 
 
    code: curr.event.countryCode 
 
    }; 
 
}); 
 

 
console.log(newData);

+0

谢谢,我从来没有找到这个解决方案! – BCLtd