javascript - 无法从 autocomplete.js 搜索结果中实际选择
问题描述
我正在使用 autoComplete.js 并且有有效的搜索结果列表。但是,正如标题所述,我实际上无法选择任何搜索结果。我拥有的当前代码如下所示。我没有更改 autoComplete.js 文件。如果有人能帮忙解决这个问题,我将不胜感激^^
(如果有兴趣,完整的回购在:https ://github.com/shonb6570/Tech-Degree-Project-7 )
index.js 文件中的代码:
document.querySelector("#autoComplete").addEventListener("autoComplete", function (event) {
console.log(event.detail);
});
const membersText = document.querySelectorAll('.members .members-container .members-text p');
let members = [];
membersText.forEach(memberText => {
members.push(memberText.textContent.toLowerCase());
});
const autoCompletejs = new autoComplete({
data: {
src: members,
},
resultsList: {
render: true,
container: source => {
source.setAttribute("id", "user-names");
},
destination: document.querySelector("#autoComplete"),
position: "afterend",
element: "ul"
},
maxResults: 5,
highlight: true,
resultItem: {
content: (data, source) => {
source.innerHTML = data.match;
},
element: "li"
},
});
解决方案
我自己找到了答案(在更高级程序员的帮助下)。我希望这对其他人有帮助。“反馈”部分需要设置如下,以允许选择结果并将其设置为搜索输入的值(使它们在单击时出现在搜索中)。
请参阅下面的附加代码:
document.querySelector("#autoComplete").addEventListener("autoComplete", function (event) {
console.log(event.detail);
});
const membersText = document.querySelectorAll('.members .members-container .members-text p');
let members = [];
membersText.forEach(memberText => {
members.push(memberText.textContent.toLowerCase());
});
const autoCompletejs = new autoComplete({
data: {
src: members,
},
resultsList: {
render: true,
container: source => {
source.setAttribute("id", "user-names");
},
destination: document.querySelector("#autoComplete"),
position: "afterend",
element: "ul"
},
maxResults: 5,
highlight: true,
resultItem: {
content: (data, source) => {
source.innerHTML = data.match;
},
element: "li"
},
//added code
onSelection: feedback => {
feedback.event.preventDefault();
document.querySelector("#autoComplete").value = feedback.selection.value;
}
});
推荐阅读
- c# - 将浮点数反序列化为“浮点”类型,而不是 Json.NET 中的默认“双精度”
- python - 使用 Spark 将值数组格式化为串联字符串
- ios - 无法同时满足约束。(自动布局)
- typescript - 使用异步等待获取数据加载
- angular - 查询商店时出现 Angular NGRX 错误:TypeError: Cannot read property 'map' of undefined
- python - 从逗号分隔的txt文件中提取正则表达式字符串
- javascript - HTML 画布线条被画成 gittery
- java - 尝试使用 ScenBuilder 在 JavaFX 中切换场景时为什么会出现此错误?
- openshift - Openshift:ImageStream 独立于存储库映像更改
- ios - VNDocumentCameraViewController 和 AVCaptureStillImageOutput 的图像差异?