Jquery AutoComplete multidimensional data source

Question

This is my data source in JSON format:

{
"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"}]
}

And I'm trying to get following output:

<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>

The default data source (JSON format) which works is as follow: [{"id":"1"},{"foo":"bar"}], I haven't been able to find a good/easy to follow documentation/tutorials on how to retrieve multidimensional data arrays.

Can anyone please shed some light for me on this, what do I need to modify/override within JQuery AutoComplete plug-in to achieve this output (within Select or Success event? or should I modify the rendering part and how)

Thanks in advance

Answer 1

I am not quite sure, which autocompleter you mean, but I guess you mean this one: http://jqueryui.com/autocomplete right?

I found that, most auto completion solutions are not really flexible at all. And it seems that there are only a few out there (although I think there were many some time ago). But there is one autoCompletion plugin used at xing that is available on their github page, that should be flexible enough to possibly fit to your special markup their. It was designed to be flexible. Check it out on github/xing/jquery.autocompletr.

The readme only mentions source, inputProcessor and outputProcessors parameters of that tool, but there also an itemRenderer, containerRenderer and beforeShow hook you can use. The itemRenderer and containerRenderer you most probably need, to get your special markup done.

Hopefully this helped. But your JSON response is really strange for usage in an autocompleter, so it also might be that you have to either change your JSON response to only result in one array with data, or write your own for your usecase.

Cheers

Answer 2

You could use jquery tmplt as a templating tool https://github.com/BorisMoore/jquery-tmpl) for what you are trying to achieve. Since your data is a JSON object you could create a template:

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);  
        }
}

});

For this be sure to include the tmpl.js CDN: http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js

Fiddle here: http://jsfiddle.net/eRQ4V/