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/