使用 getJSON 的 jQuery 自动完成

Question

我有一个名为 names.json 的 json，我需要使用自动完成功能进行输入，以在 json 中查找“名称”值。

我该怎么做？

我试过了：

$(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 正是来自这种格式，我需要在输入时返回“名称”的值：

[  
   {  
      "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
       }
    ]

Answer 1

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

HTML：

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

jquery：

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
});

这是jsFiddle上托管的上述代码的工作版本

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

HTML：

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

jquery：

// 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
    });
}

试试jsFiddle