Javascript html数据列表的自定义筛选器

我有以下表格：

苹果橙葡萄
苹果蓝莓葡萄
蓝莓草莓覆盆子

你想做的事情没有多大意义。如果用户键入“apple grape”，那么脚本在键入时应该做什么？它应该已经用“appl”开始搜索，还是应该如何知道您已完成键入并希望查找字符串（没有“立即搜索”按钮）

基于jquery，您可以在这样键入时缩小列表

$("document").ready(function () {

    $("#InputBox").on("keyup", function () {
        var searchText = $(this).val();
        searchText = searchText.toLowerCase();
        searchText = searchText.replace(/\s+/g, '');
        $('#myList > li').each(function(){
            var currentLiText = $(this).text(),
                showCurrentLi = ((currentLiText.toLowerCase()).replace(/\s+/g, '')).indexOf(searchText) !== -1;

            $(this).toggle(showCurrentLi);

        });
    });
    inactivityTime();
});

---

Datalist基本上是一个自动完成功能，它没有您想要的功能。如果有其他更合适的元素，我不必使用Datalist。在键入每个字符后，它应该更新下拉列表-就像默认行为一样，除此之外，下拉列表中显示的选项将以不同方式过滤。