Невозможно фактически выбрать из автозаполнения. js результаты поиска

Question

Я использую автозаполнение. js и у меня есть действительный список результатов поиска. Однако, как говорится в заголовке, я не могу выбрать ни одного из результатов поиска. Текущий код, который у меня есть, указан ниже. Я не изменил файл автозаполнения. js. Если бы кто-нибудь мог помочь с этим, я был бы искренне признателен за это ^^

(если интересно, полное репо по адресу: https://github.com/shonb6570/Tech-Degree-Project-7)

Код из индекса. 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;
  }
});