如何在 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
...

嘗試使用此過濾結果，但返回 Starts with 或 contains 以任何順序不按我需要進行過濾：

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>

代碼筆： https ://codepen.io/anon/pen/QajOqj/

Answer 2

您可以使用

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

Answer 3

Vadim's 是一個很好的解決方案。 這是一個通用的 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]);
};