Question

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

当用户搜索某些内容时，这是否可行，那么只有搜索文本在结果列表中变为粗体。例如，如果我搜索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/

Answer 2

无法仅更改元素中包含的部分文本的样式。

要做你要求的事情，你必须创建一个额外的元素（比如一个<span>元素），它只包含你想要变成粗体的文本，并附加它。然后，您必须从原始元素中删除相同的文本。

例如

<li filter-value="One Is">
  <span class="bold">One</span> Is (Uppercase)
</li>

由于您已经知道文本的哪一部分已被搜索，因此使用String.replace()和DOM操作方法（如document.createElement和document.appendChild）执行此操作应该是微不足道的。

Answer 3

这是我得到的。我对你的toLowerCase和toUpperCase代码有点困惑，但是大多数情况下这都有效。输入＆＃39; o＆＃39;，或＆＃39; u＆＃39;或上述任何一项进行测试。它会大胆地输入你输入的内容（小写，因为那是你的代码所做的......）

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++) {
    var elem = filterItems[i]; // assign it to a variable so that i don't have to constantly say filterItems[i]
    if (!displaySet) {
      displayArr.push(getDisplayType(elem));
    }
    elem.style.display = 'none';
    elem.innerHTML = elem.innerHTML.replace(/<b>/g, '').replace(/<\/b>/g, ''); // strip away all previous bold
    if (elem.getAttribute('filter-value').toUpperCase().indexOf(searchVal.toUpperCase()) >= 0) {
      elem.style.display = displayArr[i];
      if (searchVal.length > 0) {
        elem.innerHTML = elem.innerHTML.replace(new RegExp(searchVal, 'g'), '<b>' + searchVal + '</b>'); // replace search with bold
      }
    }
  }
  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>

JSFiddle：.find()

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

3 个答案: