自动完成弹出窗口中不可移动的空间

Question

我已经为此工作了一个小时，但我仍然不明白为什么弹出菜单在自动完成的单词之前有一个空格。我只是想知道这个问题的根本原因是什么。

这是我的尝试：

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 class="searchBar_parent">
    <form class="searchBar_child" autocomplete="off">
        <div><input id="searchBar" class="form-control searchBarInput" type="text" placeholder="Type a name here..." /></div>
        <ul class="autocomplete_popup list"></ul>
    </form>
</div>

我尝试了填充和边距，甚至尝试将宽度设置为 100%。这些并没有帮助我解决问题。

任何帮助将不胜感激;请这样做。

Answer 1

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