1

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

提前致谢

4

2 回答 2

1

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

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

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

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

干杯

于 2013-06-25T07:14:39.543 回答
0

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

于 2013-06-25T07:21:39.960 回答