Unremovable space in autocomplete popup-CodePudding

I have been working on this for an hour, and I still do not understand why the popup menu has a space before the autocompleted word. I simply want to know what the underlying cause of this issue is.

Here's my attempt:

body{
  background-color:black;
}
.searchBar_child {
  width: 100%;
  height: 40px;
  padding-left: 15px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: none !important;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.searchBarInput {
  width: 100%;
  padding: 15px 10px;
  border: none;
  border-bottom: 1px solid #645979;
  outline: none;
  border-radius: 5px 5px 0 0;
  background-color: #ffffff;
  font-size: 16px;
}

.autocomplete_popup {
  list-style: none;
}

.list {
  width: 100%;
  background-color: #ffffff;
  margin-top: 10px;
  border-radius: 10px;
}

.list-items {
  width: 100%;
  padding: 10px 15px;
}

.list-items:hover {
  color: white;
  background-color: turquoise;
  border-radius: 10px;
  width: 100% !important;
}

let names = [
    "CSS",
    "HTML",
    "Ayla",
    "Jake",
    "Sean",
    "Henry",
    "Brad",
    "Stephen",
    "Taylor",
    "Timmy",
    "Cathy",
    "John",
    "Amanda",
    "Amara",
    "Sam",
    "Sandy",
    "Danny",
    "Ellen",
    "Camille",
    "Chloe",
    "Emily",
    "Nadia",
    "Mitchell",
    "Harvey",
    "Lucy",
    "Amy",
    "Glen",
    "Peter",
];
//Sort names in ascending order
let sortedNames = names.sort();

//reference
let input = document.getElementById("searchBar");

//Execute function on keyup
input.addEventListener("keyup", (e) => {
    //loop through above array
    //Initially remove all elements ( so if user erases a letter or adds new letter then clean previous outputs)
    removeElements();
    for (let i of sortedNames) {
        //convert input to lowercase and compare with each string

        if (
            i.toLowerCase().startsWith(input.value.toLowerCase()) &&
            input.value != ""
        ) {
            //create li element
            let listItem = document.createElement("li");
            //One common class name
            listItem.classList.add("list-items");
            listItem.style.cursor = "pointer";
            listItem.setAttribute("onclick", "displayNames('"   i   "')");
            //Display matched part in bold
            let word = "<b class=\"searchBarWord\">"   i.substr(0, input.value.length)   "</b>";
            word  = i.substr(input.value.length);
            //display the value in array
            listItem.innerHTML = word;
            document.querySelector(".list").appendChild(listItem);
        }
    }
});

function displayNames(value) {
    input.value = value;
    removeElements();
}

function removeElements() {
    //clear all the item
    let items = document.querySelectorAll(".list-items");
    items.forEach((item) => {
        item.remove();
    });
}

<div >
    <form  autocomplete="off">
        <div><input id="searchBar"  type="text" placeholder="Type a name here..." /></div>
        <ul ></ul>
    </form>
</div>

I experimented with padding and margins even attempted setting the width to 100%. These did not assist me in resolving the problem.

Any help would be greatly appreciated; please do so.

CodePudding user response：

autocomplete_popup {
  list-style: none;
  padding: 0;
  margin: 0;
}