I have a database table named Locations which contains hierarchical data which again grouped by a title. To take the confusion off, here's the sample JSON returned from my API.
As you can see, I have Cities, Airports, Countries, Provinces etc. In each JSON object, "text" is the group name, children are well, the children of that group.
My Locations table has thousands of rows so I need to auto-fill these grouped data on the fly from my API. I am using the awesome Select2 library, which has everything I need to search, format and display these data.
But, I have another requirement, which is,
I have another table called something like PreferredLocations which contains some of these locations which I would search most of the time. I need to display these data (<20 records) when I open select2 dropdown before searching anything.
Using default options and operations, you can either set static data or use ajax to query the API. I want to do the both. all we have to do is create a custom "QUERY" function in select2 initialization.
This is the code, commented.
And the output,