使用 getJSON 的 jQuery 自动完成

Posted 2023-05-08

【中文标题】使用 getJSON 的 jQuery 自动完成

【英文标题】：jQuery autocomplete with getJSON

【发布时间】：2018-01-19 01:30:29

【问题描述】：

我有一个名为 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
       
    ]

【参考方案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

【讨论】：

谢谢@dawit！以及如何从外部 url 获取 json？使用 $.getJSON？

@CodeG 查看我的新更新。如果您有任何疑虑，请告诉我