Textext plugin autosuggest generates list should begin with the searched string instead of contains as first

Question

I'm using textext plugin for autocomplete, auto-suggestion etc.

I have a Destination Field i.e textbox whenever user search for a Country or city, It should populate or suggest matched cities or countries in the drop-down.

For example, if users search as 'Ameri'

Current output

from the textext plugin is retrieving all the strings which contain the searched text 'Americ'

• North America
• South America
• The United States of America
• American Canyon
• American River

Expected output want the list of matched strings, which begins with the searched text 'Americ' result should come first, later searched text contains the list.

String begins with

• American Canyon
• American River

Contains list

• North America
• South America
• The United States of America

$('#textarea').textext({
         plugins: 'tags autocomplete filter focus',
         minLength: 3,
     })
     .bind('getSuggestions', function(e, data) {
         if (data.query.length) {
             var list = [
                     'United states of America',
                     'South America',
                     'India',
                     'Delhi',
                     'Pune',
                     'North America',
                     'American River ',
                     'American canyon'
                 ],
                 textext = $(e.target).textext()[0],
                 query = (data ? data.query : '') || '';
             $(this).trigger(
                 'setSuggestions', {
                     result: textext.itemManager().filter(list, query)
                 }
             );
         }
     });

<textarea id="textarea" class="example" rows="1"></textarea>

Answer 1

I've resolved the issue myself by adding some part of code over textext plugin, please correct me if I'm not in the correct way. Here is the demo for it - http://holidays.coxandkings.com/

$('#textarea')
    .textext({
        plugins : 'autocomplete filter',
        useSuggestionsToFilter : true
    })
    .bind('getSuggestions', function(e, data)
    {
        var list = [
                'United states of America',
                'South America',
                'India',
                'Delhi',
                'Pune',
                'North America',
                'American River ',
                'American canyon'
            ],
            textext = $(e.target).textext()[0],
            query = (data ? data.query : '') || ''
            ;

        // Implementing search functionality from the begining of the string, later dispalying the contains list.
        var filterItems = textext.itemManager().filter(list, query);
        var filteredResultCount = filterItems.length;
        var beginingMatches = [];
        var containsMatches = [];
        for (var i=0; i < filteredResultCount; i++) {
            if(filterItems[i].toLowerCase().indexOf(query.toLowerCase()) == 0 ) {
                beginingMatches.push(filterItems[i]);
            }else{
                containsMatches.push(filterItems[i]);
            }
        }
        var finalResult = beginingMatches.concat(containsMatches);
        $(this).trigger(
            'setSuggestions', { result : finalResult}
        );
    });