Свернуть поисковый элемент не работает для события альтернативного ключа

Question

Код будет искать элемент внутри разборного div. Для поиска событие нажатия клавиши будет искать данные в разборном виде с помощью jquery. Если термин найден, должна отображаться только эта разборная цепочка деревьев, другие должны быть скрыты.

$(document).ready(function(){
    $("#searchbox").keypress(function(){
        $("div.collapse").collapse("hide"); //this will reset the div to hidden so that only search term is displayed
        var search = $("#searchbox").val();
        $("div.collapse").find(":contains("+search+")").parent().collapse("show");
    });
});

JSFiddle link: https://jsfiddle.net/zvn1bsxd/

Проблема в том, что поиск работает толькодля нечетных событий keyup. Когда вы набираете 2-й раз / 4-й раз и т. Д., Все div скрыты. У меня проблемы с определением, почему это происходит.

Answer 1

Нет значения в #searchbox во время первого keypress. keyup вместо keypress для спасения.

* обновлено

    $(document).ready(function () {
        $("#searchbox").keyup(function () {
            $("div.collapse").each((_, div) => {
                const match = $(div).text().includes($(this).val());

                $(div).collapse(match ? "show" : "hide")
            })
        });
    });

* обновлено pt.2

У вас есть дублирование. Код запускается только в разделе HTML

Из-за переключения времени переключения происходит асинхронно. Нет смысла вызывать .collapse ('hide') и .collapse ('show') для одного элемента за один тик. Реальные DOM-мутации происходят позже.