Javascript jQuery使用getJSON自动完成

我有一个名为names.json的json，需要使用autocomplete进行输入，以查找json中的“name”值

我该怎么做

我试过：

$(function () {
    var getData = function (request, response) {
   $.getJSON(
       "/cities.json" + request.term,
       function (data) {
           response(data);
       });
    };

    var selectItem = function (event, ui) {
        $("#myInput").val(ui.item.value);
        return false;
    }

    $("#myInput").autocomplete({
        source: getData,
        select: selectItem,
        minLength: 2,
        change: function() {
            $("#myInput").val("").css("display", 2);
        }
    });
});

但我在代码中做了一些错误的事情

我从外部文件获取json

JSON正是这种格式，我需要在输入时返回'names'的值：

[  
   {  
      "id":25,
      "name":"locale name test 2",
      "state_id":6
   },
   {  
      "id":667,
      "name":"locale name test 3",
      "state_id":24
   },
   {  
      "id":331,
      "name":"locale name test 4",
      "state_id":13
       },
       {  
          "id":776,
          "name":"locale name test 5",
          "state_id":26
       },
       {  
          "id":680,
          "name":"locale name test 6",
          "state_id":26
       }
    ]

---

下面是基于您提供的数据的基本工作自动完成示例

HTML:

以下是托管在上的上述代码的工作版本

此外： 如果您必须从外部来源获取数据，我将这样做

HTML:

---

试穿一下

谢谢@dawit！！如何从外部url获取json？使用$.getJSON？@CodeG查看我的新更新。如果你有问题，请告诉我

<input type="text" id="suggestion" />

var data = [  
   {  
      "id":25,
      "name":"locale name test 2",
      "state_id":6
   },
   {  
      "id":667,
      "name":"locale name test 3",
      "state_id":24
   },
   {  
      "id":331,
      "name":"locale name test 4",
      "state_id":13
       },
       {  
          "id":776,
          "name":"locale name test 5",
          "state_id":26
       },
       {  
          "id":680,
          "name":"locale name test 6",
          "state_id":26
       }
    ]

 var data_arr = data.map(function(val){
     return val.name;
 }). //get all the val.names on an array to make 
    // it easier when it comes setting autocomplete source
 console.log(data_arr)

$("#suggestion").autocomplete({
    source: data_arr,
    minLength: 2
});

<input type="text" id="suggestion" />

// I have hosted the same data you provided on myjson.com

 $.getJSON( "https://api.myjson.com/bins/1gkh25", function( data ) {

  var data_arr = data.map(function(val){
             return val.name;
    })

   auto(data_arr)

  });

function auto(data_arr){

   $("#suggestion").autocomplete({
        source: data_arr,
        minLength: 2
    });
}