搜索文本行軍整個文本

開發商。我需要幫助。我在下面給出了代碼。當我在搜索框中鍵入任何內容時，鍵入的值與串列項的開頭匹配。但是我希望當我在搜索框中鍵入任何內容時，鍵入值以匹配搜索項的任何部分，并且文本顏色將為紅色。我嘗試了很多次來做到這一點。

function myFunction(e) {
  // find all `li` > a elements
  let col=document.querySelectorAll('ul#myUL li a');
      // iterate through all elements; re-hide & remove className from each.
      col.forEach(n=>{
      
        n.parentNode.style.display='none';
        n.classList.remove('bold');
        
        // if the typed value matches the beginning of a list item; display the text & assign Bold className
        if( this.value.length > 0 && this.value.trim()!='' && n.textContent.toLowerCase().startsWith( this.value.toLowerCase() ) ){
        
          n.parentNode.style.display='block';
          // make the whole word bold
          //n.classList.add('bold');
          
          // make the matched portion bold
          n.innerHTML = `<span >${this.value}</span>`   n.textContent.substr(this.value.length)
        }
      });
}



document.querySelector('input[name="search"]').addEventListener('keyup',myFunction);

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li{
  display:none;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

.bold{font-weight:bold;color:red

<input name='search' type="text" placeholder="Search for names.." title="Type in a name" />
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

uj5u.com熱心網友回復：

使用includes()而不是startsWith(). 要顯示找到的文本，您需要顯示之前的文本以及之后的文本。

function myFunction(e) {
  // find all `li` > a elements
  let col=document.querySelectorAll('ul#myUL li a');
      // iterate through all elements; re-hide & remove className from each.
      col.forEach(n=>{
      
        n.parentNode.style.display='none';
        n.classList.remove('bold');
        
        // if the typed value matches the beginning of a list item; display the text & assign Bold className
        if( this.value.length > 0 && this.value.trim()!='' && n.textContent.toLowerCase().includes( this.value.toLowerCase() ) ){
        
          n.parentNode.style.display='block';
          // make the whole word bold
          //n.classList.add('bold');
          
          // make the matched portion bold
          n.innerHTML = n.textContent.substr(0,n.textContent.toLowerCase().indexOf(this.value.toLowerCase())) `<span >${this.value}</span>`   n.textContent.substr(n.textContent.toLowerCase().indexOf(this.value.toLowerCase()) this.value.length)
        }
      });
}



document.querySelector('input[name="search"]').addEventListener('keyup',myFunction);

* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li{
  display:none;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

.bold{font-weight:bold;color:red

<input name='search' type="text" placeholder="Search for names.." title="Type in a name" />
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

uj5u.com熱心網友回復：

在 Javascript 中有一個字串方法includes()，如果子字串存在于特定字串中則回傳 true，否則回傳 false。

下面的代碼將僅列出包含用戶輸入的查詢的那些專案，并突出顯示該串列項中存在搜索查詢的位置

  function myFunction(e) {
    // find all `li` > a elements
    let col = document.querySelectorAll('ul#myUL li a');
    // iterate through all elements; re-hide & remove className from each.
    col.forEach(n => {

      n.parentNode.style.display = 'none';
      n.classList.remove('bold');

      // if the typed value matches the content of a list item; display the text & assign Bold className
      if (n.textContent.toLowerCase().includes(this.value.toLowerCase())) {
        console.log(n.textContent)
        n.parentNode.style.display = 'block';
        
        n.innerHTML = `${n.textContent.replace(this.value, `<span style="color: red;">${this.value}</span>`)}`
      }
    });
  }



  document.querySelector('input[name="search"]').addEventListener('keyup', myFunction);

標籤：

上一篇：如何使用圓形半徑的按鈕附加選擇

下一篇：如何讓我的影像精靈坐在一起？