無法從 autocomplete.js 搜索結果中實際選擇

Question

我正在使用 autoComplete.js 並且有有效的搜索結果列表。 但是，正如標題所述，我無法實際選擇任何搜索結果。 我擁有的當前代碼如下所示。 我沒有更改 autoComplete.js 文件。 如果有人可以幫助解決這個問題，我將不勝感激^^

（如果有興趣，完整的 repo 位於： 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

我自己找到了答案（在更高級的程序員的幫助下）。 我希望這可以對其他人有所幫助。 “反饋”部分需要如下設置，以允許選擇結果並將其設置為搜索輸入的值（使它們在單擊時出現在搜索中）。

請參閱下面的附加代碼：

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