How do I reorder search results with Semantic UI's local search? - typeahead

Question

I have a local search box using Semantic 2.1 with an array of hashes.
[{ title: 'Andorra' , rank: 1 } , { title: 'United Arab Emirates', rank: 2 } , { title: 'Afghanistan' , rank: 3 } , { title: 'Antigua' , rank: 4 } ,...]
I would like the search results to be ordered in the order I have the hashes in the array.
For example, searching the countries with the search string Ar, right now I get
Armenia
Argentina
Aruba
Andorra
United Arab Emirates
American Samoa
Austria
But I would like to display
United Arab Emirates
Armenia
Argentina
...
Is there a way to do to do that without rewriting the source?
Here's the demo fiddle I setup: http://jsfiddle.net/zestly/ckxpvgm7/1/
As a bonus question, can anyone explain why American Samoa gets returned?

Answer 1

Only method I know is to override the results HTML creation for the search function using something like this:
$.fn.search.settings.templates = {
standard: function(response) {
// Your own sorting logic here
var sortedResults = response.results.sort(function(a, b) {
if (a.title === 'United Arab Emirates' || b.title === 'United Arab Emirates')
return 1;
else if (a.rank > b.rank)
return 1;
else if (a.rank < b.rank)
return -1;
else
return 0;
});
// Create the DOM as as it normally should be
return $.map(sortedResults, function(item) {
return $('<div>').append($('<a>').addClass('result').append(
$('<div>').addClass('content').append(
$('<div>').addClass('title').text(item.title)
)
)).html();
});
}
};
This is the last time you have access to the results array before it is drawn onto the results container. You can re-arrange it using your own sorting logic and then build up a results DOM which matches what would normally be returned anyway.