Jquery 搜索，按 id 隐藏 div

Question

我在使用以下代码时遇到问题。
我正在使用数组中的一些元素填充网页：

$a = array("Volvo", "BMW", "Toyota");

foreach($a as $item) {

echo  '<div class="column col-3" id="'.$item.'" >';
}

我有一个简单的搜索框：

<input class="form-input" id="filter" type="text" placeholder="filter">

用户开始输入时可以按 id 隐藏元素吗？

$( document ).ready(function() {
$("#filter").keyup(function() {

each element in webpage
    if div id contains userinput
        keepelement
    else
        hideit

有人可以帮忙吗？

Answer 1

这是一个工作代码。 你最好使用keyup function。

在 #filter div 上的按键事件中，它使用.column class 迭代 div 并检查其 id 是否包含过滤器 div 的值。 如果它包含，它将被隐藏，其他将被显示。

<input class="form-input" id="filter" type="text" placeholder="filter"/>
<?php
$a = array("Volvo", "BMW", "Toyota");

foreach ($a as $item) {
    echo '<div class="column col-3" id="' . $item . '" >' . $item . '</div>';
}
?>
<script>
    $(function () {
        $("#filter").keypress(function (e) {
            const val = e.target.value;
            $('div.column').each(function (ind, ele) {
                if (ele.id.includes(val)) {
                    $(ele).hide();
                } else {
                    $(ele).show();
                }
            });
        });
    });
</script>

Answer 2

$('#filter').keyup(function(){
    $('div').each(function(){
        var str = $(this).attr('id').toLowerCase();
        if(str.indexOf($('#filter').val().toLowerCase())){
            $(this).removeClass('d-none');
        }
        else{
            $(this).addClass('d-none');
        }
    });
    
});

只需使用此代码。 这适用于 html 中的所有 div 标签。 如果你只想 for.column 分类的 div 使用$('div.column')

Answer 3

试试这样 -

<input class="form-input" id="filter" type="text" placeholder="filter"/>
    <?php
    $a = array("Volvo", "BMW", "Toyota");
    
    foreach ($a as $item) {
        echo '<div class="column col-3" id="' . $item . '" >' . $item . '</div>';
    }
    ?>
    <script>
        $(function () {
            $("#filter").keypress(function (e) {
                const val = e.target.value;
                $('div.column').each(function (ind, ele) {
                    if (ele.id.includes(val)) {
                        $(ele).hide();
                    } else {
                        $(ele).show();
                    }
                });
            });
        });
    </script>