Стиль Отдельный шрифт, соответствующий входному значению. ⇐ CSS

[Anonymous]

Я работаю над проектом интеллектуального ввода текста. Имеется панель поиска, а также URL-адрес с отфильтрованным списком элементов в зависимости от введенного пользователем значения.
Как сделать шрифт полужирным в li, которые соответствуют входному значению? И это не влияет на порядок каждого символа в li?
Предположим, пользователь вводит «ap», «Apple» и «Виноград» отображается с буквой «ap», выделенной жирным шрифтом.

ul .has-suggestions {
font-weight: bold;
}

const fruit = ["Apple", "Banana", "Grape",]
let results = [];

function search(str) {
results = [
...fruit.filter((el) => el.toLowerCase().includes(str.toLowerCase())),
];

return results;
}

function searchHandler(e) {
results = [];
suggestions.textContent = "";

showSuggestions(search(input.value), input.value);
}

function showSuggestions(results, inputVal) {
for (let el of results) {
const li = document.createElement("li");
const span = document.createElement("span");

span.className = "has-suggestions";

// for each character that matches, style it bold
li.textContent = el;

li.append(span);
suggestions.append(li);
console.log(li.innerHTML);
}
}


Подробнее здесь: https://stackoverflow.com/questions/783 ... nput-value