Question

我使用md-autocomplete让用户搜索我所在大学的科目。

问题是我的搜索功能，只能通过每个显示值顺序搜索（从左到右）。

例如：如果我搜索＆＃34;艺术与建筑＆＃34;我得到＆＃34;没有找到结果＆＃34;，我不想发生。

我想＆＃34;艺术与建筑＆＃34;返回结果。

主题采用以下格式：

$scope.subjects = [
  {
    value: 'AA',
    display: 'AA - Arts and Architecture'
  },
  {
    value: 'AAAS',
    display: 'AAAS - African/Afr Amer Studies'
  },
  {
    value: 'ABA',
    display: 'ABA - Applied Behavior Analysis'
  },
  {
    value: 'ABE',
    display: 'ABE - Ag and Biological Engineering'
  }
]

这是我的搜索方法：

$scope.searchQuery = function(text) {
  text = text.toUpperCase();
  var result = $scope.subjects.filter(function(item) {
    return item.display.includes(text);
  });
  return result;
}

这是我的HTML：

<md-autocomplete 
   md-selected-item="selectedItem"
   md-search-text="searchText" 
   md-items="item in searchQuery(searchText)" 
   md-item-text="item.display" 
   md-min-length="0" 
   placeholder="Select a subject">
  <md-item-template>
    <span md-highlight-text="searchText">{{item.display}}</span>
  </md-item-template>
  <md-not-found>
    No matches found.
  </md-not-found>
</md-autocomplete>

Answer 1

<强>问题

这是由于区分大小写，即您实际上相当于......

"Arts and Architecture".includes("ARTS AND ARCHITECTURE"); // false

...由于includes区分大小写，因此返回false。它恰好在你的字符串的开头工作，因为所有的字母都是大写的，输入也是大写的：

"AA".includes("AA"); // true (fluke!)

<强>解决方案

如果您将item.display和text都设为大写，则应该有效：

$scope.searchQuery = function(text) {
  var result = $scope.subjects.filter(function(item) {
    return item.display.toUpperCase().includes(text.toUpperCase());
  });
  return result;
}

Answer 2

根据文档JS方法str.includes(searchString[, position])声明：

参数：位置 - ＆gt;可选的。字符串中开始搜索的位置对于searchString。（默认为0）。

所以你的代码从索引0开始。

如何使用indexOf代替？更改此行：return item.display.includes(text);

到return item.display.indexOf(text) !== -1;

Answer 3

＆＃34;包括＆＃34;仅当搜索的字符串存在于目标字符串中时，才会检查函数。要使md-autocomplete工作，您需要匹配包含搜索文本或搜索文本的一部分的数组中的这些对象。将您的代码修改为：

$scope.searchQuery = function(text) {
    var result = $scope.subjects.filter(function(item) {
       if (item.display.toUpperCase().indexOf(text.toUpperCase()) >-1)
          return item;
});
    return result;
}

AngularJS md-autocomplete返回所有可能的子串

3 个答案: