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

Так что для ясности, я пошел для множественного массива размерности. Вот мой файл JavaScript с автозаполнения

$(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 вход:

<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/