Jquery AutoComplete 多维数据源

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 事件中？或者我应该修改渲染部分以及如何修改）

提前致谢

Answer 1

我不太确定，您指的是哪个自动完成功能，但我猜您的意思是这个：http://jqueryui.com/autocomplete 对吧？

我发现，大多数自动完成解决方案都不是很灵活。而且似乎只有少数几个（尽管我认为前一段时间有很多）。但是xing 使用了一个 autoCompletion 插件，可以在他们的 github 页面上找到，它应该足够灵活，可能适合您的特殊标记。它被设计为灵活的。看看on github/xing/jquery.autocompletr。

自述文件只提到了该工具的source、inputProcessor 和outputProcessors 参数，但还有一个itemRenderer、containerRenderer 和beforeShow 可以使用钩子。您很可能需要 itemRenderer 和 containerRenderer 来完成您的特殊标记。

希望这会有所帮助。但是您的 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/