javascriptのみを使用して大胆に検索されたコンテンツを表示する方法は？

Question

私はjavascriptを使用して自動候補検索をしようとしています。すべてのことがうまくいきました。今、私は検索されたテキストをリスト内で太字にしたいと思っていました。

ユーザーが何かを検索したときに、検索結果のみが結果リストに太字になってしまう可能性があります。たとえば、もし私がoneを検索すると、リスト内の1つが太字になります。

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

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

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

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

 
<ul> 
 
\t <li filter-value="One Is">One Is (Uppercase)</li> 
 
    <li filter-value="one is">one is (Lowercase)</li> 
 
\t <li filter-value="two">Two</li> 
 
\t <li filter-value="three">Three</li> 
 
\t <li filter-value="four">Four</li> 
 
\t <li filter-value="five" >Five</li> 
 
\t <li filter-value="six">Six</li> 
 
\t <li filter-value="seven">Seven</li> 
 
\t <li filter-value="eight">Eight</li> 
 
\t <li filter-value="nine">Nine</li> 
 
\t <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> 

についてはすでに検索されているテキストの一部を知っているので、document.createElementとdocument.appendChildのように、この使用String.replace()とDOM操作方法を行うには些細なことする必要があります。

Answer 3

は、ここで私が得たものです働いています。私はあなたのtoLowerCaseとtoUpperCaseコードとちょっと混乱していますが、ほとんどの場合、これが機能します。 'o'、 'u'、または上記のいずれかを入力してテストしてください。あなたが入力したものだけを大胆に表示します（小文字で、あなたのコードと同じことです）。

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：https://jsfiddle.net/x5amcaqr/