无法实际从autocomplete.js搜索结果中进行选择

Question

我正在使用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"
  },
});

Answer 1

我自己找到了答案(在更高级的程序员的帮助下)。我希望这能对其他人有所帮助。"feedback“部分需要设置如下，以允许选择结果并将其设置为搜索输入的值(使它们在单击时显示在搜索中)。

请参阅下面的附加代码：

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;
  }
});