Javascript 可搜索下拉列表

我有一个下拉列表中的项目，可以使用下拉列表中的搜索进行过滤

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Please select</button>
    <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
      <a href="#">Abyssinian</a>
      <a href="#">American Bobtail</a>
      <a href="#">Amercian Curl</a>
    </div>
</div>

请选择

还有js

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

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

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
函数filterFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“myDropdown”）；
a=div.getElementsByTagName（“a”）；
对于（i=0；i-1）{
a[i].style.display=“”；
}否则{
a[i].style.display=“无”；
}
}
}

我想要的是，如果用户开始搜索某个内容，但没有匹配项，则显示消息的一种方式

---

感谢您的帮助！谢谢

看看这里，添加了一些新代码，并在没有找到结果时创建了一个新元素

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
函数filterFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“myDropdown”）；
a=div.getElementsByTagName（“a”）；
var empty=document.createElement（“a”）；
empty.classList.add（“empty”）；
empty.innerHTML=“未找到结果…”；
var emptyVisiable=true；
对于（i=0；i-1）{
a[i].style.display=“”；
emptyVisiable=false；
}否则{
a[i].style.display=“无”；
}
}
如果（可清空）
div.appendChild（空）；
否则{
empty=div.querySelector（“.empty”）
if（空！==null）
empty.remove（）；
}
}

.dropbtn{
背景色：#E3；
背景图像：url（'https://image.flaticon.com/icons/png/512/25/25243.png');
背景位置：270px中心；
背景重复：无重复；
背景大小：5%；
颜色：#333；
边框：1px纯红；
边界半径：5px；
最小宽度：300px；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
文本对齐：左对齐；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#D3；
}
#我的输入{
框大小：边框框；
背景图像：url（'https://www.w3schools.com/howto/searchicon.png');
背景位置：14px 12px；
背景重复：无重复；
字体大小：16px；
填充：14px 20px 12px 45px；
边界：无；
边框底部：1px实心#ddd；
宽度：100%；
}
#myInput:focus{outline:3px solid#ddd；}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f6f6f6；
最小宽度：230px；
宽度：100%；
最大高度：260px；
溢出：自动；
边框：1px实心#ddd；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉列表a:悬停{背景色：#ddd；}
.show{display:block；}

搜索/筛选下拉列表
单击按钮打开下拉菜单，并使用输入字段搜索特定的下拉链接

请选择

您可以通过为html中的错误添加一个p标记和一个计数器来实现这一点，该计数器每次在筛选函数的循环中找不到res时递增，然后在末尾添加一个if，检查计数器是否==链接的长度

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
函数filterFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
div=document.getElementById（“myDropdown”）；
a=div.getElementsByTagName（“a”）；
让计数=0；
对于（i=0；i-1）{
a[i].style.display=“”；
}否则{
计数++；
a[i].style.display=“无”；
}
}
如果（计数=a.length）
显示无结果（过滤器）；
}
函数displayNoResults（searchTxt）{
让noResFound=document.getElementById（“noResFound”）；
noResFound.style.display=“块”
noresfind.innerHTML=`未找到“${searchTxt}”的结果`
}

请选择

ES6将代码缩小了一点：

函数过滤器函数（sText）{
[…document.queryselectoral（'#myDropdown a'）].forEach（elA=>elA.classList.toggle（'hide'，！new RegExp（sText，'gi'）.test（elA.textContent））；
document.querySelector（'#myDropdown span.err'）.classList.toggle（'hide'，document.queryselectoral（'#myDropdown a:not（.hide'））.length）；
}

.hide{display:none；}.err{color:red；}

请选择
什么也没找到

如果这是您想要的答案，请将其标记为答案。这与我的答案基本相同，但我必须说，您的解决方案在语法上更加甜美@CouchCode:JS创新创造奇迹！它只剩下赶上技术了：-）