如何排序列表首先开始，然后在 md-autocomplete AngularJS 中包含字符串搜索答案

【问题标题】：How to sort list start with first and then contains string search in md-autocomplete AngularJS如何排序列表首先开始，然后在 md-autocomplete AngularJS 中包含字符串搜索
【发布时间】：2018-05-28 10:10:42
【问题描述】：

我是 angularJs 新手，想过滤搜索结果。

这是一个例子： https://codepen.io/anon/pen/mpJyKm

我希望基于查询输入过滤的搜索结果，例如字符串以结果列表中的第一个开头然后包含。我正在使用 md-autocomplete 示例，并且只想在 controller 中过滤列表。

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

尝试了这个来过滤结果，但返回 Starts with or contains 以任何顺序没有我需要的过滤：

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

【问题讨论】：

标签： javascript angularjs sorting md-autocomplete

【解决方案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/

【讨论】：

【解决方案2】：

你可以使用

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

【讨论】：

【解决方案3】：

Vadim 是一个很好的解决方案。这是一个通用的 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]);
};

【讨论】：