Javascript 如何将此addEventListener更改为单击按钮
因此,我有一个搜索json javascript,它将结果与您键入的内容匹配,并自动执行。这几行是什么意思(见下文)。有没有办法把它改成只在按下按钮时才工作Javascript 如何将此addEventListener更改为单击按钮,javascript,Javascript,因此,我有一个搜索json javascript,它将结果与您键入的内容匹配,并自动执行。这几行是什么意思(见下文)。有没有办法把它改成只在按下按钮时才工作 const searchInput = document.querySelector('.search'); const suggestions = document.querySelector('.suggestions'); searchInput.addEventListener('change', displayMatches);
const searchInput = document.querySelector('.search');
const suggestions = document.querySelector('.suggestions');
searchInput.addEventListener('change', displayMatches);
searchInput.addEventListener('keyup', displayMatches);
这是功能-
function displayMatches() {
const matchArray = findMatches(this.value, name);
const html = matchArray.map(place => {
const regex = new RegExp(this.value);
const nameName = place.name.replace(regex, `<span class="hl">${this.value}</span>`);
return `
<a href="${place.url}" target="_blank">
<li>
<span class="name">${nameName} <br> ${(place.price)}</span>
<img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100">
</li>
</a>
`;
}).join('');
suggestions.innerHTML = html;
}
函数displayMatches(){
const matchArray=findMatches(this.value,name);
常量html=matchArray.map(位置=>{
const regex=new RegExp(this.value);
const nameName=place.name.replace(regex,`${this.value}`);
返回`
`;
}).加入(“”);
suggestions.innerHTML=html;
}
所有当前代码如下:
const endpoint = "https://gist.githubusercontent.com/valeriu7474/4df04fafd994c2f778847a3e94451b44/raw/d288ddbc9cbc8bbcf89a10f2a8ead9eecb4962f6/allcurrentshops";
const name = [];
fetch(endpoint).then(blob => blob.json())
.then(data => name.push(...data));
function findMatches(wordToMatch, name) {
return name.filter(place => {
//we need to figure out if the name match
const regEx = new RegExp(wordToMatch, 'gi');
return place.name.match(regEx);
});
}
// function displayMatches() {
// const matchArray = findMatches(this.value, name);
// const html = matchArray.map(place => {
// const regex = new RegExp(this.value);
// const nameName = place.name.replace(regex, `<span class="hl">${this.value}</span>`);
// return `
// <a href="${place.url}" target="_blank">
// <li>
// <span class="name">${nameName} <br> ${(place.price)}</span>
// <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100">
// </li>
// </a>
// `;
// }).join('');
// suggestions.innerHTML = html;
// }
function displayMatches() {
const searchText = document.querySelector('.search');
const matchArray = findMatches(searchText, name);
const html = matchArray.map(place => {
const regex = new RegExp(searchText);
const nameName = place.name.replace(regex, <span class="hl">${searchText}</span>);
return ` <a href="${place.url}" target="_blank"> <li> <span class="name">${nameName} <br> ${(place.price)}</span> <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100"> </li> </a> `; }).join(''); suggestions.innerHTML = html;
}
// const searchInput = document.querySelector('.search');
// const suggestions = document.querySelector('.suggestions');
const searchBtn = document.querySelector('.btn-search');
searchBtn.addEventListener('click', displayMatches);
const端点=”https://gist.githubusercontent.com/valeriu7474/4df04fafd994c2f778847a3e94451b44/raw/d288ddbc9cbc8bbcf89a10f2a8ead9eecb4962f6/allcurrentshops";
常量名称=[];
fetch(endpoint).then(blob=>blob.json())
.then(data=>name.push(…data));
函数findMatches(wordToMatch,name){
返回name.filter(位置=>{
//我们需要弄清楚名字是否匹配
const regEx=new RegExp(wordToMatch,'gi');
返回地点.名称.匹配(正则表达式);
});
}
//函数displayMatches(){
//const matchArray=findMatches(this.value,name);
//常量html=matchArray.map(位置=>{
//const regex=new RegExp(this.value);
//const nameName=place.name.replace(regex,`${this.value}`);
//返回`
//
// `;
//})连接(“”);
//suggestions.innerHTML=html;
// }
函数displayMatches(){
const searchText=document.querySelector('.search');
const matchArray=findMatches(搜索文本,名称);
常量html=matchArray.map(位置=>{
const regex=new RegExp(searchText);
const nameName=place.name.replace(regex,${searchText});
返回“`;}).join(“”);suggestions.innerHTML=html;
}
//const searchInput=document.querySelector('.search');
//const suggestions=document.querySelector(“.suggestions”);
const searchBtn=document.querySelector('.btn search');
searchBtn.addEventListener('单击',显示匹配项);
从.search
字段中删除eventlisteners,然后添加一个按钮
const searchBtn=document.querySelector('.searchBtn');
searchBtn.addEventListener('单击',显示匹配项);
编辑:如果我正确解释函数,请使用输入的搜索文本的新变量更新
displaymets
函数displayMatches(){
const searchText=document.querySelector('.search').value;
const matchArray=findMatches(搜索文本,名称);
常量html=matchArray.map(位置=>{
const regex=new RegExp(searchText);
const nameName=place.name.replace(regex,${searchText});
返回``;
}).加入(“”);
suggestions.innerHTML=html;
}
它可以显示结果,但与键入的内容不匹配。@valeriu7474将displayMatches
函数添加到您的问题中,这样我们就可以帮助您找到答案。Ahhh。由于.search
输入不再是触发事件的内容,此
不再绑定到它。该字段值需要一个变量。请参阅我的编辑。