如何使用这些json数据进行自动提示

时间:2017-10-15 18:33:53

标签: jquery json ajax autocomplete autosuggest

我尝试从第三方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的方法,但没有任何帮助。 请给我一些想法。

1 个答案:

答案 0 :(得分: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>");
   });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<br>
<span></span>
&#13;
&#13;
&#13;