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

Question

我是 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
...

尝试使用此方法来过滤结果，但返回的开头为或包含任何顺序，而没有按我的需要进行过滤：

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

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]);
};

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

How to sort list start with first and then contains string search in md-autocomplete AngularJS

javascript

sorting

angularjs

md-autocomplete