Question

我有一个像这样的对象数组如何在某些字符串模式之后搜索这个对象数组？

如果我进入＆＃39; B＆＃39;结果应该是'弯曲'＆＃39;和＆＃39; benny

如果我进入＆＃39; benn＆＃39;结果应该是＆＃39; benny＆＃39;

HTML

<form>
    <input id="getCoins" type="text" name="getCoins" placeholder="">
</form>

的JavaScript

var input = document.getElementById("getCoins");
var arr = [0:{name: 'bent', town: 'kansas'}1:{ name:'benny', town:'vegas'}]
input .addEventListener("keyup", function(e){
    console.log(filterIt(arr, input.value));
}

这是我在另一篇文章中尝试的但是我无法让它起作用？

function filterIt(arr, searchKey) {
    return arr.filter(function (obj) {
        return Object.keys(obj).some(function (key) {
            return obj[key].includes(searchKey);
        })
    });
}

注意：我只想搜索名称，而不是城镇

Answer 1

首先定义一个函数，该函数在给定单项的情况下确定过滤条件。如果项目应包含，则此函数应返回布尔值。

function match(inputValue, item) { /* .... */ }

然后您可以在Array.prototype.filter()函数中使用此函数，如下所示：

var matchingValues = arr.filter(match.bind(null, input.value));

由于match()函数有两个参数，但filter()一次只传递一个项目，我们partially apply使用bind()和{{1}匹配函数将input.value函数转换为函数只会期待该项目。

这与做：

相同

match()

如果您使用部分应用程序，我发现代码看起来更整洁，更容易理解。

哦，其中一位评论者指出OP只想要var matchingValues = arr.filter(function (item) { return match(input.value, item); });部分。在这种情况下，只需链接name调用以提取名称：

.map()

编辑：您还应该修复数组：

var matchingNames = arr
  .filter(function (item) { 
    return match(input.value, item); 
  })
  .map(function (item) {
    return item.name;
  });

我建议花一些时间来设置ESLint并将其集成到您的编辑器中，这样您的代码看起来很漂亮，并且至少没有语法错误。

Answer 2

function filterIt(arr, searchKey) {
    return arr.filter(function (obj) {
        return obj.name.search(searchKey) != -1;
    });
}

Answer 3

您可以使用forEach迭代数组，然后for..in迭代每个对象。在函数顶部声明一个数组，然后将任何匹配项推送到数组中并返回该数组。

function findMatches(arr, searchString){
  const matches = [];

  arr.forEach((obj) => {
    for (const key in obj) {
      if (obj[key].includes(searchString)){
        matches.push(obj[key]);
      }
    }
  });

  return matches;
}

const arr = [
  {name: 'bent', town: 'kansas'},
  {name:'benny', town:'vegas'}
];

console.log(findMatches(arr, "b"));
// => ["bent", "benny"]

console.log(findMatches(arr, "benn"));
// => ["benny"]

Answer 4

更优化的解决方案是预先提取初始 名称/城镇 字词。然后，在每个keyup事件上 - 在该字符串内搜索。

包含RegExp对象和String.match()函数的解决方案：

＆＃13;

var input = document.getElementById("getCoins"),
    arr = [{name: 'bent', town: 'kansas'},{ name:'benny', town:'vegas'}],
    item_str = arr.map((o) => Object.values(o).join(' ')).join(' ');

input.addEventListener("keyup", function(e){
    var pat = new RegExp('\\w*'+e.target.value+'\\w*', 'gi');
    console.log(item_str.match(pat));
});

＆＃13;

<form>
    <input id="getCoins" type="text" name="getCoins" placeholder="">
</form>

＆＃13;

如何制作搜索数组的搜索功能

4 个答案: