基于使用JavaScript在搜索栏中输入的多个单词对数组进行动态筛选

我已经实现了一个代码，它将使用搜索选项卡中的关键字过滤项目数组

当我们输入/删除在搜索选项卡中输入的关键字时，数组将被实时过滤并显示在屏幕上

需要筛选“人员”数组：

var person = [{fname : "John1", lName: "ABC", age: 46},
{fname : "John2", lName: "ABC", age: 55},
{fname : "John3", lName: "XYZ", age: 96}];

“搜索数组”：

在searchArray=

John ABC 55中为输入的值

“产出”：

假设查询的格式不变，我会这样做：


function filterPerson(arr, query) {
   let [fname, lName, age] = query.split(" ").filter(function(chunk) {
      return chunk.trim().length > 0;
   };
   age = age ? +age : null; //converts age to number

   if(!fname) return [];

   arr = arr.filter(function(person) {
      return person.fname.startsWith(fname);
   });

   if(!lName) return arr;

   arr = arr.filter(function(person) {
      return person.lName.startsWith(lName);
   });

   if(!age) return arr;

   arr = arr.filter(function(person) {
      return person.age === age;
   });

   return arr;
}


可以在单个筛选函数中执行此操作，但是每次筛选数组时都必须检查是否设置了名、姓和年龄。这样，您只需检查查询一次，并过滤已过滤的查询

或者，您可以为每个用例创建一个过滤函数，例如，当有一个参数、两个、三个或更多参数时

或者，您可以重新排序筛选序列，以便尽早删除尽可能多的条目

祝你好运

    searchArrayList = searchArray.split(' ');

    filteredArray = person.filter(function (item) {
                                let row = [item.fname != null ? item.fname.toLowerCase() : '',
                                    item.lName != null ? item.lName.toLowerCase() : '',
                                    item.age != null ? item.age.toLowerCase() : ''].join();
            
                                let result = searchArrayList.map(function (part) {
                                    if (part === '') return true
                                    return row.indexOf(part.toLowerCase()) !== -1
                                })
                                
                                return result.reduce(function (x, y) {
                                    return x&y
                                }, true)
                            })

解释：

将搜索数组字符串“John ABC 55”拆分为数组
['John'，ABC'，55']

searchArrayList = searchArray.split(' ');


JOIN（）


将搜索结果映射到布尔数组：

["John1 ABC 55"].indexOf("John") => 'true',
["John1 ABC 55"].indexOf("ABC") => 'true',
["John1 ABC 55"].indexOf("55") => 'true'

映射结果=>[true，true，true]


Reduce将生成单个布尔数组：
true


问题是什么？如果用户输入
hn AB 5
，会发生什么？换句话说，搜索的规则是什么？从什么开始？包含？精确匹配？96 XYZ John3怎么样？即，订单是否重要？等等。@HereticMonkey-也允许部分匹配。@AndrewPaul-如果我们添加“John”->所有3行过滤，在“John ABC”输入->前2行过滤后，“John ABC 55”->将过滤掉第2行
["John1 ABC 55"].indexOf("John") => 'true',
["John1 ABC 55"].indexOf("ABC") => 'true',
["John1 ABC 55"].indexOf("55") => 'true'