如何使用vanilla javascript实现搜索功能？

我制作了一个联系人列表应用程序，其中显示了联系人详细信息。我想实现基于姓名的搜索功能。现在，当我输入某人的名字时，它应该会动态地更改联系人列表

index.html：

var数组=[]；
职能人员（全名、编号、组）{
this.fullName=fullName；
这个数字=数字；
this.group=组；
array.push（这个）；
}
Person.prototype.getFullName=函数（）{
返回this.fullName+''+this.number+''+this.group；
}
变量p1=新人（“Jonathan Buell”，5804337551，“家庭”）；
变量p2=新人（“帕特里克·丹尼尔”，8186934432，“工作”）；
console.log（数组）；
/*
函数save（）{
setItem（“数组”，JSON.stringify（数组））；
}
函数submitToDb（）{
var person=新人员（nameInput.value、numberInput.value、groupInput.value）；
//刷新（）；
} 
var storedArray=JSON.parse（localStorage.getItem（“数组”）；
函数loadLocalStorage（）{
用于（storedArray中的变量i）{
数组[i]=storedArray[i]；
}
//刷新（）；
}
loadLocalStorage（）；
*/
函数showContacts（）{
for（数组中的变量i）{
var id=i；
contactlist.innerHTML+=
`

名称：`+array[i].fullName+`

编号：`+数组[i]。编号+`

组：`+数组[i]。组+`

编辑
删除
`
}
}
showContacts（）；
函数addNew（）{
document.getElementById（“search”）.style.display='none'；
document.getElementById（“contactlist”）.style.display='none'；
document.getElementById（“editcontact”）.style.display='none'；
document.getElementById（“addnewcontact”）.style.display=''；
document.getElementById（“addnewcontact”）.innerHTML=
`
名称
数
团体
提交
`;
}
功能编辑联系人（id）{
document.getElementById（“search”）.style.display='none'；
document.getElementById（“contactlist”）.style.display='none'；
document.getElementById（“editcontact”）.style.display=''；
document.getElementById（“editcontact”）.innerHTML=
`
名称
数
团体
提交
`;
}
/*
函数saveMe（id）{
数组[id].fullName=document.getElementById（“nameInput2”）.value；
数组[id].number=document.getElementById（“numberInput2”）.value；
数组[id].group=document.getElementById（“groupInput2”）.value；
}
*/
函数deleteMe（id）{
阵列拼接（id，1）；
//刷新（）；
//save（）；
}

.header{
显示器：flex；
}
.header>div{
浮动：左；
}
.标题.标题{
左侧填充：400px；
}
.标题.下拉列表{
填充顶部：20px；
左侧填充：20px；
}
.标题.按钮{
左侧填充：500px；
垫面：5px；
}
.图标加号{
字体大小：50px；
}
#搜索表单.输入组{
左侧填充：30px；
右侧填充：30px；
垫底：10px；
}
.输入组{
填充顶部：20px；
}
.表格组{
左侧填充：30px；
右侧填充：30px；
}
表格.btn小学{
左边距：30px；
}

联系人列表应用程序
按组排序





所有联系人

代码片段中有很多不相关的代码。但是，一般来说，你的朋友是：

const contacts = [
  { fullName: 'Jonathan Buell', number: 5804337551, group: 'family' },
  { fullName: 'Joey Whatever', number: 5454355351, group: 'family' },
  { fullName: 'Patrick Daniel', number: 8186934432, group: 'work' }
];

contacts.filter(contact => contact.fullName.startsWith('Jo'));
/*
Result:
  [
    { fullName: 'Jonathan Buell', number: 5804337551, group: 'family' },
    { fullName: 'Joey Whatever', number: 5454355351, group: 'family' }
  ]
*/

…但是

startsWith

是区分大小写的，它将为小写字母“jo”返回一个空数组

一种解决方案是改用正则表达式：

contacts.filter(contact => contact.fullName.match(/^jo/i));
contacts.filter(contact => contact.fullName.match(/^Jo/i));

/*
The 'i' flag makes matching case-insensitive.
Result is the same as above in both cases. 
*/

您可以轻松创建过滤功能：

const filterContacts = (startLetters, contacts) =>
  contacts.filter(contact =>
    contact.fullName.match(new RegExp(`^${startLetters}`, 'i'))
  );

…并像这样使用它：

filterContacts('jo', contacts);

/*
Result:
  [
    { fullName: 'Jonathan Buell', number: 5804337551, group: 'family' },
    { fullName: 'Joey Whatever', number: 5454355351, group: 'family' }
  ]
*/

filterContacts('pat', contacts);

/*
Result:
  [
     { fullName: 'Patrick Daniel', number: 8186934432, group: 'work' }
  ]
*/

…当然，将其绑定到搜索输入更改：

searchInput.addEventListener('input', function(event) {
    const startLetters = event.target.value;
    const filteredContacts = filterContacts(startLetters, contacts);
    // …and display filteredContacts in your template
});

工作代码段（需要支持ES2015的现代浏览器）：

document.addEventListener（'DOMContentLoaded'，function（）{
常数触点=[
{全名：'Jonathan Buell'，号码：5804337551，组别：'family'}，
{全名：'Joey Whather'，号码：5454355351，群组：'family'}，
{全名：'Patrick Daniel'，号码：8186934432，组：'work'}
];
常量过滤器触点=（触目惊心者、触点）=>
contacts.filter（contact=>
contact.fullName.match（新的RegExp（`^${startters}`，'i'））
);
//加载页面后，使用所有联系人填充列表：
const contactList=document.querySelector（'ul'）；
contactList.innerHTML=联系人
.map（contact=>`
${contact.fullName}，${contact.number}
`）
.加入（“”）；
//用户在输入中键入内容时筛选联系人，并用筛选的联系人替换列表内容：
document.querySelector（'input'）。addEventListener（'input'，函数（事件）{
常数=event.target.value；
常量filteredContacts=filterContacts（触角、触点）；
contactList.innerHTML=筛选出的联系人
.map（contact=>`
${contact.fullName}，${contact.number}
`）
.加入（“”）；
});
});

大量不相关的代码。我建议做一个简单的列表和输入，这就是演示所需的全部内容。然后，如果你把它转换成普通版本就很容易了。问题到底是什么？@Liam当我在输入框中搜索时说，如果我键入
J
它应该显示所有以
J
开头的联系人，然后如果我键入
Jon
它应该只显示
Jonathan
联系人。这不是问题，查看它是否没有
？
？那是你想要什么的陈述。那你为什么不能这么做？你想从我们这里得到什么信息？我想你需要阅读