如何仅使用html/css/javascript（无jquery等）重置我搜索框中的列表？

我有一个带有下拉菜单的搜索框，当你输入字母时，它会过滤列表中的项目。我的问题是，当我单击X按钮时，它会像预期的那样清除搜索框，但不会重置框下的项目列表。示例：如果我键入javascript，我们将在框下看到javascript，但当我单击X按钮时，它仍然是javascript，而不是初始列表

那么，是否有任何可能的方法可以使用javascript将其重置为初始列表？（注意：我不能使用jquery或任何框架）

非常感谢

函数过滤器（）{
var值、myList、名称；
value=document.getElementById（“value”）.value.toUpperCase（）；
myList=document.queryselectoral（“.myList>li”）；
Array.prototype.forEach.call（myList，函数（元素）{
name=element.innerHTML；
element.style.display=name.toUpperCase（）.indexOf（value）>-1？“列表项”：“无”；
});
}
document.getElementById（'value'）.addEventListener（'keyup'，filter）；
函数myFunction（）{
document.querySelector（'.clearable'）。值=''；
}

ul{
列表样式：无；
保证金：0；
填充：0；
}
输入[type=“button”]{
左边距：-30px；
边界：无；
背景色：透明；
大纲：无；
}

Javascript
Java
CSS
Python
C++

您可以重用现有代码，循环所有li元素，并在myFunction调用中重新显示它们：

保险商实验室{
列表样式：无；
保证金：0；
填充：0；
}
输入[type=“button”]{
左边距：-30px；
边界：无；
背景色：透明；
大纲：无；
}

Javascript
Java
CSS
Python
C++

函数过滤器（）{
var值、myList、名称；
value=document.getElementById（“value”）.value.toUpperCase（）；
myList=document.queryselectoral（“.myList>li”）；
Array.prototype.forEach.call（myList，函数（元素）{
name=element.innerHTML；
element.style.display=name.toUpperCase（）.indexOf（value）>-1？“列表项”：“无”；
});
}
document.getElementById（'value'）.addEventListener（'keyup'，filter）；
函数myFunction（）{
var myList；
document.querySelector（'.clearable'）。值=''；
myList=document.queryselectoral（“.myList li”）；
Array.prototype.forEach.call（myList，函数（元素）{
element.style.display='列表项'；
});
}