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

Question

I am using autoComplete.js and have valid search results listing. However, as the title states, I am unable to actually select any of the search results. The current code that I have is listed below. I did not alter the autoComplete.js file. If anyone could help with this, I would sincerely appreciate it^^

( if interested, full repo is at: https://github.com/shonb6570/Tech-Degree-Project-7 )

Code from the index.js file:

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

I found the answer myself (with help from a more advanced programmer). I hope that this can be of help to someone else. The "feedback" section needs to be set as follows to allow results to be selected and set as the value of the search input( making them appear in the search when clicked ).

See appended code below:

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