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

您的节点在文件中显示为nodes键，因此您应该遍历data.nodes，而不是data：

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

您可能想要提供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);
}

不要忘记在调用回调之前，您必须自己在服务器端或客户端进行过滤。以下是标签必须包含查询（不区分大小写）

的示例

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/

使用json文件的jQuery UI自动完成

1 个答案: