搜索串列或过滤器串列-编程知识-白鹭情

我创建了一个搜索串列或过滤器串列。但我想添加这些功能 -

默认情况下，搜索串列将被隐藏。
当有人点击搜索框时，搜索串列似乎被隐藏了。当它开始在搜索框中输入并匹配搜索串列中的任何文本时，它就会显示出来。
匹配的文本将加粗。

我尝试添加许多 javascript 函式，但它不起作用。如果您知道任何替代方式，请分享。

function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i  ) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

* {
  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 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;
}

<input type="text" id="myInput" onkeyup="myFunction()" 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热心网友回复：

目前尚不清楚这是文本是否要进行大胆的是仅是输入的字符串或整个字符串的部分，下面有一个commente DOUT部分，使整个字加粗。使用资料串列的替代方法不需要对基本功能进行额外编码，并且是互联网上此类问题的更常见方法。

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

<h5>The original approach</h5>
<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>

<h5>An alternative involving no Javascript for a similar end result using a datalist</h5>
<input type='text' name='dlsearch' list='dls' />
<datalist id='dls'>
  <option>Adele
  <option>Agnes
  <option>Billy
  <option>Bob
  <option>Calvin
  <option>Christina
  <option>Cindy
</datalist>