javascript - 如何仅使用 javascript 加粗搜索内容？

Question

我正在尝试使用 javascript 进行自动建议搜索。一切正常，现在我想在列表中将搜索到的文本加粗。

当用户搜索某些内容然后只有搜索文本在结果列表中变为粗体时，这是否可能。例如，如果我搜索 one，那么列表中的 one 将以粗体显示。

var inputId 	= 'filter-search';
var itemsData 	= 'filter-value';
var displaySet = false;
var displayArr = [];

function getDisplayType(element) {
	var elementStyle = element.currentStyle || window.getComputedStyle(element, "");
	return elementStyle.display;
}

document.getElementById(inputId).onkeyup = function() {
	var searchVal = this.value.toLowerCase();
	var filterItems = document.querySelectorAll('[' + itemsData + ']');
	for(var i = 0; i < filterItems.length; i++) {
		if (!displaySet) {
			displayArr.push(getDisplayType(filterItems[i]));
		}
		filterItems[i].style.display = 'none';
		if(filterItems[i].getAttribute('filter-value').toUpperCase().indexOf(searchVal.toUpperCase()) >= 0) {
			filterItems[i].style.display = displayArr[i];		
		}
	}
	displaySet = true;
}

<input type="text" id="filter-search" />

<ul>
	<li filter-value="One Is">One Is (Uppercase)</li>
  <li filter-value="one is">one is (Lowercase)</li>
	<li filter-value="two">Two</li>
	<li filter-value="three">Three</li>
	<li filter-value="four">Four</li>
	<li filter-value="five" >Five</li>
	<li filter-value="six">Six</li>
	<li filter-value="seven">Seven</li>
	<li filter-value="eight">Eight</li>
	<li filter-value="nine">Nine</li>
	<li filter-value="ten" >Ten</li>
</ul>

Answer 1

我已经通过使用下面的代码做到了这一点

var textcontent = filterItems[i].textContent;
    var replacedval = "<strong>"+currval+"</strong>"
    var finalval = textcontent.replace(currval, replacedval);
   filterItems[i].innerHTML = finalval;
        filterItems[i].style.display = 'none';

这里正在运行 JSFiddle
https://jsfiddle.net/ku5zv3dz/