Question

I have Posts tied to a location so when I make jQuery autocomplete on that location field results with same name appear in the dropdown.

For example:

If there are 10 posts with location Berlin and I start typing the city name the autocomplete will give me the name of the location multiplied by the number of posts. I was wondering if there is a way to group location names using jQuery.

Thanks

Answer 1

This jquery ui demo is similar to your requirement.

The original data:

var data = [
                { label: "anders", category: "" },
                { label: "andreas", category: "" },
                { label: "antal", category: "" },
                { label: "annhhx10", category: "Products" },
                { label: "annk K12", category: "Products" },
                { label: "annttop C13", category: "Products" },
                { label: "anders andersson", category: "People" },
                { label: "andreas andersson", category: "People" },
                { label: "andreas johnson", category: "People" }
            ];

you can change them to

 var data = [
                { label: "Berlin", category: [post1, post2] },
                { label: "Paris", category: [post3, post4, post5] },
                { label: "Tokyo", category: [post6, post7, post8] },
                { label: "Taipei", category: [] }
                ...
      ];

To retrieve the value

select: function( event, ui ) {
                console.log( ui.item.label );
                console.log( ui.item.category ); //this is an array
                return false;
}

And http://jqueryui.com/autocomplete/#custom-data
is a demo about custom data format of dropmenu

I hope this sample helpful.