Q:

Filter countries in correct order in javascript?

I have a list of countries that I am filtering through to get the best matching result first based on the input term. I use 2 examples to show the issue. Search for the term unit or in you'll see that the expected returned country names order is not correct. The expected results are to return those country names that start with the term and after that priority, return countries with partial term string matches. Here is the code with both terms, the current results, and the expected results in the first 2 comments below:
const {observable, action, computed} = mobx;
const {observer} = mobxReact;

@observer
class Country extends React.Component {
    /*
     1. Type term: 'unit'
        Results:
        - Emirates, The United Arab
        - United States
        - The United Kingdom
        SHOULD BE:
        - United States (this should be first since it starts with the term 'unit')
        - The United Kingdom (this should be second since term 'unit' occurs in the name before "Emirates, The United Arab")
        - Emirates, The United Arab

     2. Type term: 'in'
        Results:
        - China
        - India
        - The United Kingdom
        SHOULD BE:
        - India (this should be first since it starts with the term 'in')
        - China (this should be second since 'in' term occurs in the name before "The United Kingdom")
        - The United Kingdom
    */

    @observable filterTermValue = '';
    @observable countriesList = [
      {'slug': 'amsterdam', 'name': 'Amsterdam'},
      {'slug': 'china', 'name': 'China'},
      {'slug': 'uae', 'name': 'Emirates, The United Arab'},
      {'slug': 'iceland', 'name': 'Iceland'},
      {'slug': 'india', 'name': 'India'},
      {'slug': 'usa', 'name': 'United States'},
      {'slug': 'uk', 'name': 'The United Kingdom'},
      {'slug': 'vienna', 'name': 'Vienna'}
    ];

    @computed get filtered() {
      let filteredList = this.countriesList.filter(
        t=>t.name.toLowerCase().indexOf(this.filterTermValue)>-1
      );

      return filteredList;
    }

    render() {
        return (
          <div>
              Term: <input placeholder="Start typing country"
                 onKeyUp={this.onChangeFilterTerm} />

              {this.filtered.map(country =>
                  <div key={country.slug}>
                    <p>{country.name}</p>
                  </div>
              )}
          </div>
        )
    }

    @action onChangeFilterTerm = (e) => {
        this.filterTermValue = e.target.value.toLowerCase();
    }
}

ReactDOM.render(
  <Country />,
  document.body
);

Here is the fiddle
Any idea how to update the filtered() function to return the expected results correctly?

A:

It seems that you need to sort the returned array in the filtered method. Taking a look at the use cases you mention in your question, I think you could sort the array by the index where the match starts.
So, your filtered method could look like:
@computed get filtered() {
    return this.countriesList
        .filter(t => t.name.toLowerCase().indexOf(this.filterTermValue) >-1)
        .sort((a, b) => a.name.toLowerCase().indexOf(this.filterTermValue) - b.name.toLowerCase().indexOf(this.filterTermValue));
}

