如何使用这些 json 数据进行自动建议

Question

我试图从第 3 方 API 链接加载 JSON 数据，在该链接中我可以将关键字作为城市名称传递。 像 Keywords=newyork 并基于该关键字，它给了我一个城市或地区数据列表，如下所示：

{
"account":null,
"accountId":0,
"accountType":0,
"accountProfile":0,
"unreadMessages":0,
"database":"dbname",
"entity":"geo",
"method":"wSearchCity",
"result":1,
"message":null,
"data":[
  {
    "id": "145086",
    "name": "New York City, NY"
  },
  {
    "id": "99600",
    "name": "Newport News, VA"
  },
  {
    "id": "139934",
    "name": "Newark, NJ"
  },
  {
    "id": "39964",
    "name": "New Orleans, LA"
  },
  {
    "id": "108279",
    "name": "New Haven, CT"
  },
  {
    "id": "13073",
    "name": "Newark, DE"
  },
  {
    "id": "139922",
    "name": "New Brunswick, NJ"
  },
  {
    "id": "119774",
    "name": "New Bedford, MA"
  },
  {
    "id": "63726",
    "name": "New Bern, NC"
  },
  {
    "id": "108261",
    "name": "New Britain, CT"
  }
]
}

现在我想创建一个输入字段，它会在输入城市名称时从这个 JSON 数据中为我提供运行时名称。

我尝试了许多在 google 和 stackoverflow 上可用的方法，但没有任何帮助。 请给我一些想法。

Answer 1

var json={"account":null,"accountId":0,"accountType":0,"accountProfile":0,"unreadMessages":0,"database":"dbname","entity":"geo","method":"wSearchCity","result":1,"message":null,"data":[{"id": "145086","name": "New York City, NY"},{"id": "99600","name":"Newport News, VA"},{"id": "139934","name": "Newark, NJ"},{"id": "39964","name": "New Orleans, LA"},{"id": "108279","name": "New Haven, CT"},{"id": "13073","name": "Newark, DE"},{"id": "139922","name": "New Brunswick, NJ"},{"id": "119774","name": "New Bedford, MA"},{"id": "63726","name": "New Bern, NC"},{"id": "108261","name": "New Britain, CT"}]};

$("input[type='text']").on("keyup",function(){
  var Val=$(this).val();
  $("span").empty();
  $(json.data).each(function(key,value){
    if ((value.name).search(Val) != -1) 
     $("span").append(value.name + " | "+value.id).append("<br>");
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<br>
<span></span>