如何在不点击搜索按钮的情况下创建搜索功能？

how to create a search feature without clicking the search button?

提问人：Hilmi Hidayat 提问时间：11/2/2020 更新时间：3/3/2021 访问量：3204

问：

如何在不点击搜索按钮的情况下创建搜索功能？因此，当输入一个值时，回车可以立即显示搜索结果。

index.blade.php

<div class="input-group col-10">
                        <input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
                        <div class="input-group-append">
                            <button class="btn btn-primary form-control btn-search">Search</button>
                        </div>
                    </div>

index_script.刀片.php

$(".btn-search").click(function() {
                $(".see-more").click();
                $(".see-more").remove();

                var value =  $(".search-bar").val().toLowerCase();

                $(".course-item").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });

                $(".owl-item").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });

                $.each($("#ajar-catalog-container .owl-stage"), function() {
                    var count = 0;
                    $.each($(this).children('.owl-item'), function() {
                        display = $(this).children().css('display');
                        if (display == 'block') {
                            count++;
                        }
                    });

                    if(count == 0) {
                        $(this).closest('.card').css('display', 'none');
                    }
                    else {
                        $(this).closest('.card').css('display', 'block');
                    }
                });
            });

请帮忙，谢谢

JavaScript PHP Ajax Laravel

评论

答：

3赞 No.5972 11/2/2020 #1

只需手动触发 button 元素的 click 事件即可。

$("#search-bar").keydown(function(e){
        if (e.keyCode == 13) {
                $(".btn-search").click();
        }
});
0赞 Harshana 11/2/2020 #2

方法#1

您可以在 JavaScript 中使用该事件在向输入字段输入值时获取结果。oninput

var searchInput = document.getElementById("search-bar")
searchInput.oninput = function(){
  // put your logic for search filter here
}
<div class="input-group col-10">
                        <input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
                        <div class="input-group-append">
                            <button class="btn btn-primary form-control btn-search">Search</button>
                        </div>
                    </div>

方法#2 -

你可以使用 jQuery 的事件keydown()

$("#search-bar").keydown(function(){
   // your logic here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group col-10">
                        <input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
                        <div class="input-group-append">
                            <button class="btn btn-primary form-control btn-search">Search</button>
                        </div>
                    </div>

上一个：如何在 laravel 8 中创建带有变量的自定义错误页面

下一个：使用 jquery 创建搜索功能