Как сортировать список, начинающийся с первого, а затем содержит поиск строки в md-autocomplete AngularJS

Question

Я новичок в angularJs и хочу отфильтровать результаты поиска.

Вот пример: https://codepen.io/anon/pen/mpJyKm

Я хочу, чтобы результат поиска был основан на фильтрованном входном запросе, например, строка начинается с первого в списке результатов, а затем содержит. Я использую пример md-autocomplete и хочу фильтровать список только в контроллере.

e.g. If search input is : A
then result should be like this :
Alabama
Alaska
Arizona
Arkansas
California
Colorado
...

пробовал это для фильтрации результатов, но возвращение начинается с или содержит в любом порядке без фильтрации, как мне нужно:

function createFilterFor(query) {
    var lowercaseQuery = angular.lowercase(query);
    return function filterFn(state) {
    return (state.value.indexOf(lowercaseQuery) != -1);
    };
}

Answer 1

Ты можешь использовать querySearch() функционировать так:

function querySearch (query) {
  var q = angular.lowercase(query);
  var results = self.states
    .reduce(function(res, state) {
      var idx = state.value.indexOf(q);
      if(idx === 0) {
        res[0].push(state)
      } else if(idx > 0) {
        res[1].push(state)
      }
      return res;   
    },[[],[]])
  return results[0].concat(results[1]);
}

Вы можете просмотреть все состояния и поместить те из них, которые соответствуют запросу, в один из двух массивов: первый - это то, где состояние начинается с запроса, и второй, если совпадение находится в середине. После формирования этих массивов вы можете объединить их. Так как ваш allStates уже отсортированы по алфавиту, вам не нужно применять дополнительную сортировку впоследствии.

Кроме того, если вы хотите выделить соответствующий шаблон без учета регистра, вы должны добавить md-highlight-flags="i" к вашему шаблону товара

<md-item-template>
    <span md-highlight-text="ctrl.searchText" 
          md-highlight-flags="i">{{item.display}}</span>
</md-item-template>

CodePen: https://codepen.io/anon/pen/QajOqj/

Answer 2

Вы можете использовать

md-items="item in querySearch(searchText) | orderBy : 'fieldName'"

Answer 3

Вадима - отличное решение. Вот общая версия TS:

interface QuerySearchProps {
  query: string;
  data: any;
  propToMatch: string;
}

export const querySearch = ({query, data, propToMatch}: QuerySearchProps) => {
  const q = query.toLowerCase();
  const results = data.reduce(
    function (res: any, item: any) {
      const idx = item[propToMatch].toLowerCase().indexOf(q);
      if (idx === 0) {
        res[0].push(item);
      } else if (idx > 0) {
        res[1].push(item);
      }
      return res;
    },
    [[], []],
  );
  return results[0].concat(results[1]);
};