Question

这是我的JSON格式的数据源：

{
"list-1":
    [{"id":"1","value":"andy"},{"id":"2","value":"sandy"}],
"list-2":
    [{"id":"1","value":"candy"},{"id":"2","value":"brandy"}],
"list-3":
    [{"id":"1","value":"mandy"},{"id":"2","value":"dandy"}]
}

我正试图获得以下输出：

<div id="result">
    <ul class="list-1">
        <li>andy</li>
        <li>sandy</li>
    </ul>
    <ul class="list-2">
        <li>candy</li>
        <li>brandy</li>
    </ul>
    <ul class="list-3">
        <li>mandy</li>
        <li>dandy</li>
    </ul>
</div>

默认数据源（JSON格式）有效如下：[{“id”：“1”}，{“foo”：“bar”}]，我一直无法找到好的/易于学习如何检索多维数据数组的文档/教程。

任何人都可以为此阐明一下，我需要在JQuery AutoComplete插件中修改/覆盖以实现此输出（在Select或Success事件中？或者我应该修改渲染部分以及如何）< / p>

提前致谢

Answer 1

我不太确定，你的意思是哪个自动填充，但我想你的意思是这个：http://jqueryui.com/autocomplete对吗？

我发现，大多数汽车完成解决方案都不是很灵活。似乎只有少数几个（虽然我认为很久以前有很多）。但是xing上有一个autoCompletion插件可以在他们的github页面上找到，它应该足够灵活，可能适合你的特殊标记。它的设计灵活。请查看on github/xing/jquery.autocompletr。

自述文件仅提及该工具的source，inputProcessor和outputProcessors参数，但还有itemRenderer，containerRenderer和beforeShow您可以使用的钩子。 itemRenderer您最需要的，以完成特殊标记。

希望这有帮助。但是你的JSON响应对于在自动完成器中的使用来说真的很奇怪，所以它也可能是你必须改变你的JSON响应只能产生一个包含数据的数组，或者为你的用例编写你自己的响应。

干杯

Answer 2

您可以使用jquery tmplt作为模板工具https://github.com/BorisMoore/jquery-tmpl）来实现您想要实现的目标。由于您的数据是JSON对象，因此您可以创建模板：

HTML：

<div id="result">

</div>


//On document ready:
$(document).ready(function(){
//set your json object (this could be from a ajax call or whatever)    
var objectData = 
    {
    "list-1":
        [{"id":"1","value":"andy"},{"id":"2","value":"sandy"}],
    "list-2":
        [{"id":"1","value":"candy"},{"id":"2","value":"brandy"}],
    "list-3":
        [{"id":"1","value":"mandy"},{"id":"2","value":"dandy"}]
    }

    //init variables
    var key, count = 0;
    //loop through the object:
    for(key in objectData) {
       //create a UL element for each main item:
       $('#result').append('<ul class="' + key + '"></ul>');

        //loop through each child object:
        if(objectData.hasOwnProperty(key)) {
            for (var i = 0; i < objectData[key].length ; i++)
             //add the template:  
             $.tmpl( '<li>${value}</li>', { "value" : objectData[key][i].value }).appendTo("." + key);  
        }
}

});

为此，请务必包含tmpl.js CDN：http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js

在这里小提琴：http://jsfiddle.net/eRQ4V/

Jquery AutoComplete多维数据源

2 个答案: