如何使用 JavaScript 在数组中创建 onkey up 搜索？答案

【问题标题】：How to create onkey up search in array using JavaScript?如何使用 JavaScript 在数组中创建 onkey up 搜索？
【发布时间】：2019-09-06 10:35:35
【问题描述】：

我想使用 JavaScript 在包含名称的数组中创建 keyup 搜索。我的排列是这样的，

[
 {
  "first_name": "abc",
  "account_id": 1
 },
 {
  "first_name": "Test",
  "account_id": 2
 },
 {
  "first_name": "Hasad",
  "account_id": 3
 }
]

当用户向文本框添加文本时，

用户输入：a

输出：abc，哈萨德

这应该类似于在数据库中使用 sql 查询进行搜索。请帮我解决这个问题。

【问题讨论】：

所以您只想过滤已有的数组？
您需要尝试过我们的帮助才能帮助您。
正是我想要过滤该数组@LazarNikolic
您喜欢只查看一处房产还是全部查看，例如：stackoverflow.com/q/44312924/1447675
我正在尝试使用输入框@MattEllen 的每个索引进行过滤

标签： javascript node.js

【解决方案1】：

你可以使用一个简单的过滤功能

const data = [
 {
  "first_name": "abc",
  "account_id": 1
 },
 {
  "first_name": "Test",
  "account_id": 2
 },
 {
  "first_name": "Hasad",
  "account_id": 3
 }
];

function search(input){
  const filtered = data.filter(element => {
     for (const value of Object.values(element)) {
       if (value.toString().toLowerCase().includes(input.value.toLowerCase())) return true;
     }
  })
  document.getElementById("result").innerText=JSON.stringify(filtered)
}

<input onkeyup="search(this)">
<div id="result">[{"first_name":"abc","account_id":1},{"first_name":"Test","account_id":2},{"first_name":"Hasad","account_id":3}]</div>

请注意，我的函数搜索了对象的所有字段，查找所需的值，并返回符合条件的对象列表，供您以任何所需的方式使用。

此外，如果您要搜索的数据量显着增加，您可以考虑使用debounce 函数仅经常触发它（例如，在用户停止输入一秒钟后）

【讨论】：

“添加测试”是什么意思
在搜索框中输入测试
我的搜索是区分大小写的，如果你输入“测试”就可以了
@KunalDholiya 我在上面的函数中添加了.toLowerCase()，使其不区分大小写

【解决方案2】：

您可以 .filter() 您的数组仅包含 first_name 包含搜索字母的结果，然后 .map() 您的数组：

const arr = [
 {
  "first_name": "abc",
  "account_id": 1
 },
 {
  "first_name": "Test",
  "account_id": 2
 },
 {
  "first_name": "Hasad",
  "account_id": 3
 }
];

const search = 'a';
const res = arr.filter(({first_name}) => first_name.includes(search)).map(({first_name}) => first_name);

console.log(res);

但是，这种方法效率不高，因为您需要循环每个对象，然后每次搜索每个 first_name。如果您正在寻找高效的东西，您可以使用prefix-trie 来帮助您。

【讨论】：

【解决方案3】：

您可以通过采用小写字符串来过滤地图。

var data = [{ first_name: "abc", account_id: 1 }, { first_name: "Test", account_id: 2 }, { first_name: "Hasad", account_id: 3 }],
    key = 'first_name',
    value = 'a',
    result = data
      .filter(o => o[key].toLowerCase().includes(value.toLowerCase()))
      .map(o => o[key]);

console.log(result);

【讨论】：

【解决方案4】：

function searchFunction() {
  const arrayValue = [{
      "first_name": "abc",
      "account_id": 1
    },
    {
      "first_name": "Test",
      "account_id": 2
    },
    {
      "first_name": "Hasad",
      "account_id": 3
    }
  ];

  const searchValue = document.getElementById('txtsearch').value;
  const response = arrayValue.filter(({
    first_name
  }) => first_name.includes(searchValue)).map(({
    first_name
  }) => first_name);

  console.log(response);
  document.getElementById('showResponse').innerHTML = response
}

<input type='text' id='txtsearch' name='txtsearch' onkeyup="searchFunction()" />
<div id='showResponse'></div>

【讨论】：