Question

我有一个json文件列出了大约3000个对象。每个物体都是机场。我想创建一个功能，用户可以通过输入名称来过滤掉单个机场。

这就是我想出来的

<input (keyup)="searchAirport(searchquery)" [(ngModel)]="searchquery" id="searchAirport"/>
<span>{{searchedAirport}}</span>

成分</ P>

searchedAirport: string;

this.http.request('/assets/resources/airportsraw.json')
  .map(res => res.json())
  .subscribe(data => {
      this.airportsArray = data;
  });

searchAirport(value) {
  for (const i of this.airportsArray) {
    if (value === i.name ) {
      this.searchedAirport = i.name;
    }
  }
}

这确实会返回正确的Aiport名称，但它有2个缺点。它只适用于您使用大写搜索。因此barcelona不会返回任何内容，但Barcelona会。

第二个缺点是，只有在价值完全等于机场名称时才会返回。

如何根据部分搜索返回值？那么Bar而不是Barcelona，我怎么能解决资本问题？

Answer 1

我会尝试这样的事情：

const findMatches = (values) => test => {
  const regex = new RegExp(test, 'i'); 
  return values.filter(val => regex.test(val.name))
}

const searchAirports = findMatches(airports);

显然你可以内联findMatches函数，但我认为它更具可读性。

Answer 2

忽略案例：

value.toLowerCase（）=== i.name.toLowerCase（）

对于部分搜索，您可能需要使用正则表达式（Regex）

Answer 3

您可以通过以下方式使用正则表达式

let arr = ['abc', 'abd', 'Abe', 'bcd', 'cde', 'edf'];

let input = 'ab';
let re = new RegExp('^' + input, 'i');

let result = arr.filter(e => e.match(re) != null);

console.log(result);

Answer 4

要在前端搜索大量数据，这就是我在javascript端做的 -

假设您的数据数组（JSON对象）看起来像['abcd', 'abfer', 'xyds', 'irkd',...]（超过10,0000个元素） - array1
从json加载数组时，创建一个javascript数组，它是一个26长度的二维数组，并在每个索引处存储每个char的元素索引。例如，对于上面的数组，您的新数组看起来像这样 - [[0, 1], [0, 1], [0], [0, 2, 3], [1], [1], [], [], ...] - array2 含义 - char＆＃39; a＆＃39;存在于第0个元素和第1个元素中，char＆＃39; d＆＃39;存在于0,2,3元素中。

现在您的对象已准备就绪，页面已准备好进行快速搜索。

当用户键入搜索字符串时，onkeyup会执行此操作 -

让我们说用户搜索'bf'
从第2步中的数组中，为char b和char f加载数组，并取两者的交集。您现在将拥有所有具有char b和char f - intersected
现在迭代你的交集数组，直接转到原始数组中的那些索引（从步骤1开始），然后执行indexOf（＆＃39; bf＆＃39;）

//pseudo code var t = 0; $.each(intersected, function(k, v){ if(array1[k].indexOf(searchString) > -1){ results[t++] = array1[k]; } }); return results;

这样你就不会遍历数组中的所有元素。您只迭代将使用chars用户搜索的元素。

要提供不区分大小写的搜索，请在准备toLowerCase()的同时转换所有内容array2，并在搜索时

Answer 5

您可以这样做：

{{1}}

这将执行不区分大小写的过滤器，并将返回包含任何已定义文本的所有项目。

Answer 6

检查以下示例代码。可能会对您有帮助。

filterData(search){

    var data = [{
            "id":1,
            "category":"mycategory"
           },
           {        
                "id":2,
                "category":"second"
            },
            {
                "id":3,
                "category": "thirdcat"
            }];

    return returnedData = $.grep(data, function(element, index){
        search = search.toLowerCase();
        var elementCategory = element.category.toLowerCase();
        if(elementCategory.indexOf(search) !== -1){
            return element;
        }

    });


}

过滤大型arrray（3000+）对象

6 个答案: