javascript - 如何将复杂的嵌套 json 映射到 jquery 自动完成格式?

标签 javascript json jquery-ui-autocomplete

如何将复杂的嵌套 json 映射到 jquery 自动完成格式?我尝试将自定义 json 映射到所需的 jquery 自动完成格式标签、值...但我的列表是“未定义”。这是我的设置:

JSON:

{"data":[{"DT_RowId":"row_A6J851","accounts":{"code":"A6J851","name":"Peter Jackson"}},{"DT_RowId":"row_1D01Q14","accounts":{"code":"1D01Q14","name":"Earl Bundy"}}]}

Javascript:

$('#input-search').autocomplete({
source: function ( request, response ) {
  $.ajax({
    type: 'GET',
    url: '/source.php', 
    dataType: "json",
    success: function( data ) {
        response( $.map( data.data.accounts, function( value, key ) {
            return {
              label: value.name,
              value: value.name,
              id: value.code
            }
        }));
      }
    });
},  
create: function() {            
    $(this).data('ui-autocomplete')._renderItem  = function (ul, item) {
        return $( "<li></li>" )
            .append( "<a>" + item.label + "</a>" )
            .appendTo( ul );
    };         
}       
});

最佳答案

从您的数据示例来看,您似乎没有迭代嵌套的帐户数组,而是迭代数据数组。尝试这样的事情:

$('#input-search').autocomplete({
  source: function ( request, response ) {
    $.ajax({
      type: 'GET',
      url: '/source.php', 
     dataType: "json",
     success: function( data ) {
       var results = [];
       $.each(data.data, function(d){
         var mapped = $.map(d.accounts, function( value, key ) {
          return {
            label: value.name,
            value: value.name,
            id: value.code
           };
          })
         results = results.concat(mapped);       
         });
         response(results);
        }
      });
 },  
 create: function() {            
    $(this).data('ui-autocomplete')._renderItem  = function (ul, item)     {
         return $( "<li>" )
            .append( "<span>" + item.label + "</span>" )
            .appendTo( ul );
  };         
 }       
});

关于javascript - 如何将复杂的嵌套 json 映射到 jquery 自动完成格式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43005228/

相关文章:

java - 如何阻止 JsonBuilder 排列字段顺序

JQuery UI 自动完成,在输入字段中键入更多字符时隐藏 div

javascript - 如何根据用户当前输入以编程方式访问匹配值列表 - jQuery 自动完成?

javascript - 按键事件与点击事件

javascript - 一个页面中的多个选项卡,但其他选项卡的内容也显示在第一个选项卡中

java - 如何在 Java 中使用 Gson @SerializedName 序列化嵌套对象?

javascript - 使用 Webpack 捆绑单独的 CSS

php - IOS 连接到 PHP webserver 插入数据到 mysql

javascript - 页面加载前是否有任何事件?

javascript - props.clickHandler 不是一个函数(ReactJS)