我在jquery中的函数工作不正常，但在简单的JS中很好

Question

此代码用于自动完成搜索

单击的主题未显示在search-input-box中

$(function () {
let s = ["aa", "abb", "acc", "adf"],
search = document.querySelector(".search"),
inputBox = document.querySelector(".search-input input"),
suggBox = document.querySelector(".suggBox");
inputBox.onkeyup = (e) => {
let userData = e.target.value;
let A = [];
if (userData) {
A = s.filter((d) => {
return d.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
});
A = A.map((d) => {
return (d = `<li onclick="select(this)">${d}</li>`);
});
search.classList.add("active");
show(A);
}
};
function show(e) {
suggBox.innerHTML = !e.length
? `<li>` + inputBox.value + `</li>`
: e.join("");
}
function select(e) {
inputBox.value = e.textContent;
}
});

如果我移除$(function(){ ....})，则select(e)工作良好

注意上面的代码是一些长jQuery文件的一部分，这就是为什么我需要jQuery 中的解决方案

Answer 1

因为select(e)在匿名函数中，所以可以访问它，所以必须使用document.createElement("li")创建元素并附加监听器，或者只需将click监听器添加到文档中，然后检查target是否是您想要的元素。

document.body.onclick = function(e) {
if (e.target.className == 'item')
inputBox.value = e.target.textContent
}

演示

$(function() {
let s = ["aa", "abb", "acc", "adf"],
search = document.querySelector(".search"),
inputBox = document.querySelector(".search-input input"),
suggBox = document.querySelector(".suggBox");
inputBox.onkeyup = (e) => {
let userData = e.target.value;
let A = [];
if (userData) {
A = s.filter((d) => {
return d.toLocaleLowerCase().startsWith(userData.toLocaleLowerCase());
});
A = A.map((d) => {
//  return (d = `<li onclick="select(this)">${d}</li>`); // replace this
return (d = `<li class="item">${d}</li>`);
});
search.classList.add("active");
show(A);
}
};
function show(e) {
suggBox.innerHTML = !e.length ?
`<li>` + inputBox.value + `</li>` :
e.join("");
}
/*function select(e) {
inputBox.value = e.textContent;
}*/
$(document).on('click', '.item', function(){
inputBox.value = this.textContent;
})

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-input">
<input type="text">
</div>
<div class="search"></div>
<div class="suggBox"></div>