vanilla_使用Vanilla JavaScript的快速简单的搜索过滤器

vanilla

When building Single Page Applications a feature I frequently find myself adding is a simple search filter. Nothing too in depth, I'll just want a text field to be able to quickly filter over items to find specific ones.

构建单页应用程序时，我经常发现自己添加的功能是一个简单的搜索过滤器。 没什么要深入的，我只是希望一个文本字段能够快速过滤项目以找到特定的项目。

I'm going to share what I do, because it's quick to implement, performant enough, and often very helpful.

我将分享我的工作，因为它实现起来很快，性能足够好，而且通常很有帮助。

To start with, this technique assumes that the data you're filtering over is in the form of an array of objects. From there it's all standard libarary array and string methods.

首先，该技术假定您要过滤的数据是对象数组的形式。 从那里开始，所有的标准库数组和字符串方法。

我们的工具 ( Our Tools )

Array.prototype.filter ( Array.prototype.filter )

Array.prototype.filter is how we filter our array.

Array.prototype.filter是我们过滤数组的方式。

As a parameter, it takes a callback that it runs on each item of the array. This callback should return true or false for whether or not it should be a member of the filtered array.

作为参数，它需要在数组的每个项目上运行的回调。 此回调应返回true或false以确定它是否应为已过滤数组的成员。

let oneToTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sixToTen = a.filter((element, index) =>  a > 5); // return [6, 7, 8, 9, 10];

String.prototype.toLowerCase ( String.prototype.toLowerCase )

String.prototype.toLowerCase is nothing fancy. It takes a string, it turns all the letters to lowercase.

String.prototype.toLowerCase没什么特别的。 它需要一个字符串，所有字母都变成小写。

For this example it's purpose is string normalization. It's what's going to lets us find "The", even if we type in "the" or "tHe".

在此示例中，其目的是字符串标准化。 即使我们键入“ the”或“ tHe”，它也将使我们找到“ The”。

let lowercaseString = "Hello, World!".toLowerCase(); // returns "hello, world!"

In a more complete setup you may need to do much more for your string normalization.

在更完整的设置中，您可能需要为字符串归一化做更多的事情。

###

###

String.prototype.includes ( String.prototype.includes )

String.prototype.includes is the heavy lifter of the filter. You pass it a string and it gives you back true or false to let you know if its a substring of the original string.

String.prototype.includes是过滤器的重物。 您将其传递给一个字符串，它会返回true或false，以告知您它是否是原始字符串的子字符串。

let data = "I don't want to go, I don't want to go. Mr. Stark , please." // returns false.
let tony = data.includes("Mr. Stark"); //returns true
let peter = data.includes("Spiderman"); //return false

一起拉 ( Pulling it all together )

Laying out each of those, it should be pretty clear how it all comes together. What we want to do is as follows:

对每个布局进行布局，应该很清楚它们如何组合在一起。 我们想要做的如下：

1. Normalize search input.
   归一化搜索输入。
2. Normalize field we are searching on.
   归一化我们正在搜索的字段。
3. Check if normalized search input is a substring(included) in the field we are searching on.
   检查规范化搜索输入是否是我们正在搜索的字段中的子字符串（包括）。
4. Return a new array with only the items where the last statement was true.
   返回仅包含最后一条语句为true的项目的新数组。

So what does that looks like? Assuming the data looks like below:

那看起来像什么呢？ 假设数据如下所示：

let data = [
  {
    title: 'Ready Player One',
    author: 'Ernest Cline',
  },
  {
    title: 'The Circle',
    author: 'Dave Eggers',
  },
];

We can do a quick search filter over the authors by doing:

我们可以通过以下方法对作者进行快速搜索：

let substring = "est c";
let filteredData = data.filter(book => book.author.toLowerCase().includes(substring.toLowerCase()) 

/*
returns [
  {
    title: 'Ready Player One',
    author: 'Ernest Cline'
  }
]

注意事项 ( Caveats )

This method returns an array of all matchs, regardless of whether or not one is an exact match. If you want an exact match look instead to Array.prototype.find

此方法返回一个包含所有匹配项的数组，而不管一个匹配项是否完全匹配。 如果您想要完全匹配，请查看Array.prototype.find

翻译自: https://scotch.io/tutorials/quick-and-simple-search-filter-using-vanilla-javascript

vanilla