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插件中修改/覆盖哪些内容才能实现此输出(在选择或成功事件中？或者我是否应该修改渲染部分以及如何修改)

提前感谢

Answer 1

您可以使用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/

Answer 2

我不是很确定，你指的是哪个自动补全，但我猜你是指这个：http://jqueryui.com/autocomplete，对吗？

我发现，大多数自动补全解决方案一点也不灵活。而且似乎只有几个(尽管我认为不久前有很多)。但是在xing的github页面上有一个可以使用的autoCompletion插件，它应该足够灵活，可能适合你的特殊标记。它的设计是灵活的。请查看on github/xing/jquery.autocompletr。

自述文件只提到了该工具的source、inputProcessor和outputProcessors参数，但您也可以使用itemRenderer、containerRenderer和beforeShow挂钩。您最可能需要的itemRenderer和containerRenderer，用于完成特殊标记。

希望这能有所帮助。但是您的JSON响应在autocompleter中的使用真的很奇怪，所以您也可能必须更改JSON响应，使其只产生一个包含数据的数组，或者根据您的用例编写自己的响应。

干杯