Javascript 更好的IntelliSense过滤器/搜索列表，上面有文本和图标

我只是在做一个纯JavaScript的IntelliSense过滤器/搜索列表。我希望使用jQuery时代码更少、效率更高，因为我对使用jQuery库的想法更少。此外，onkeydown无法正常工作，下拉列表也无法关闭onkeydown

请建议我更改，我可以在上面添加标签吗，如下图所示

函数intelliSearch（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（'intelliSearchField'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“intelliSearch”）；
li=ul.getElementsByTagName（'li'）；
//循环浏览所有列表项，并隐藏与搜索查询不匹配的项
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
如果（a.innerHTML.toUpperCase（）.indexOf（过滤器）>+1）{
ul.style.display=“无”；
}
}
}
函数intelliSearchDown（）{
var-xdx；
xdx=document.getElementById（“intelliSearch”）；
ul.style.display=“无”；
}

HTML:

我修改了你的小提琴，它应该可以让你走了：

$(function(){
    $('#intelliSearchField').keyup(function(){
  var value = $(this).val();
    if(value.length > 0){
      $('#intelliSearch').show();
      $('#intelliSearch').find('li').filter(function () {
        $(this).toggle($(this).text().toLowerCase().indexOf(value.toLowerCase()) > -1);
      });
    }else{
        $('#intelliSearch').hide();
    }

    $("#intelliSearch li").click(function(){
     $('#intelliSearchField').val($(this).text());
     $('#intelliSearch').hide();
    })


  });
});

---

单击结果后，其范围不会显示在文本框中。任何工作都很好