jQuery UI自动完成与json文件

Question

我的自动完成输入字段不起作用，我找不到原因。我正在使用外部JSON文件，如下所示：

{ 
    "nodes": [ 
    {"id": "nt", "data": { 
     "class": "date", 
     "label": "Expositions New Tendencies", 
     "tooltip": "New Tendencies Exhibition", 
     "content": "Ceci est une visualisation de donnée concernant les différentes expositions sous le nom de 'New Tendencies', et regroupe les différents artistes, et leurs oeuvres. Pour parcourir la visualisation, cliquez sur les différents noeuds !", 
     "graphicFillColor": "#fff", 
     "graphicSize": 80, 
     "labelFontSize": 18, 
     "labelFontWeight": "regular", 
     "labelPosition": "right" 
    }}], 

"edges": [ 
    {"source": "nt1", "target": "AdrianMarc"} 
]} 

为了清楚起见，我选择了多维数组。下面是自动完成的

$(function() { 
    $('#recherche').autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "feature-tour.json", 
       dataType: 'json', 
       data: request, 
       success: function(data) { 
        response($.map(data, function(item) { 
         console.log(item.nodes.id); 
         return(item.nodes.id) 
        })); 
       } 
      }); 
     }, 
     minLength: 0 
    }); 
}); 

和HTML输入我的JavaScript文件：

<input type="text" id="recherche" placeholder="→ Rechercher un artiste"/> 

我想显示自动完成输入内部节点的标签，如果有人可以帮助我进入到节点的标签。谢谢 ！

Answer 1

1. 你的节点被暴露在文件中nodes关键，所以你应该遍历data.nodes，不data：

   success: function(data) { 
       var filtered = $.map(data.nodes, function(item) { 
       // ... 
       }); 
       response(filtered); 
   } 
   

2. 你可能想养活你response回调an array of objects with label and value properties：

   success: function(data) { 
       var filtered = $.map(data.nodes, function(item) { 
        return { 
         label: item.data.label, 
         value: item.id 
        }; 
       }); 
       response(filtered); 
   } 
   

3. 不要忘记你必须做过滤器在调用回调之前，您可以自己调整服务器端或客户端。在此处，标签必须包含查询为例（不区分大小写）

   success: function(data) { 
       var query = request.term.toLowerCase(), 
        filtered; 
   
       filtered = $.grep(data.nodes, function(item) { 
        return item.data.label.toLowerCase().indexOf(query) !==-1 ; 
       }); 
   
       filtered = $.map(filtered, function(item) { 
        return { 
         label: item.data.label, 
         value: item.id 
        }; 
       }); 
   
       response(filtered); 
   } 
   

并演示http://jsfiddle.net/fh93xue4/2/