Question

我有一个包含员工姓名的数组。

var names = ['Jordan,Michael','Davis,Jordan','Franco,James','Rogen,Seth','Griffin,Peter','James,Tim',..]

我想在我的网页上添加一项功能，允许用户输入他们要查找的名称，并能够看到每个人都有这个名字。所以如果用户输入乔丹。约旦，迈克尔和戴维斯，乔丹都会回归。

有没有办法可以用javascript / jquery做到这一点？

Answer 1

使用Array.prototype.filter

＆＃13;

var search = 'Jordan';
var names = ['Jordan,Michael','Davis,Jordan','Franco,James','Rogen,Seth','Griffin,Peter','James,Tim']

var results = names.filter(name => name.indexOf(search) > -1);
console.log(results);

＆＃13;

对于不区分大小写的匹配，您需要使用正则表达式。

以下代码段假设 needle 和 haystack 中只有字母数字字符。 ^{特殊字符可以使用简单替换str = str.replace(/[^a-zA-Z0-9]/g, '');}

删除

注意：要允许特殊字符，需要对其进行转义。

＆＃13;

var names = ['Jordan,Michael','Davis,Jordan','Franco,James','Rogen,Seth','Griffin,Peter','James,Tim']

var search = 'jorDan' // cAsE-InsEnsItIvE
    regex = new RegExp(search, 'i');

var results = names.filter(name => regex.test(name));
console.log(results);

document.body.innerHTML = '<pre>' + JSON.stringify(results, 0, 4) + '</pre>';

＆＃13;

Answer 2

尝试使用这样的对象数组：

var names = [
  {firstName:'Jordan', lastName:'Michael'},
  {firstName:'Davis', lastName:'Jordan'},
] 

var searchedName = "Jordan";
var result = names.filter(function( searchedName) {
    return names.firstName == searchedName || names.lastName == searchedName;
});

Answer 3

这是一个模糊的搜索字段，我无法想到任何名字，所以这个有三个Tim来说明这一点。

它使用正则表达式将当前键入的字母与输入字段进行匹配。

＆＃13;

var names = [
  'Jordan,Michael', 
  'Davis,Jordan', 
  'Franco,James', 
  'Rogen,Seth', 
  'Griffin,Peter', 
  'James,Tim',
  'Burton,Tim',
  'Allen,Tim'
];

var
  input = document.querySelector('#input'),
  results = document.querySelector('#results');

input.addEventListener('keyup', function(e) {
  filterNames( this.value );
});

// init the filter;
filterNames('');

// helper to filter the names array by a value
function filterNames( value ){
  results.innerHTML = names.filter(function(name) {
    return name.match(new RegExp( value.split('').join('.*'), 'ig'));
  }).reduce(function( str, name) {
    return str + '<li>' + name + '</li>';
  }, '');
}

＆＃13;

<input type="text" id="input">
<ul id="results"></ul>

＆＃13;

搜索数组中的字符串并返回匹配^

3 个答案: