javascript - 使用 JS 或 AJAX 通过页面上的 JSON 对象进行实时搜索过滤器 (laravel)

Question

我是 AJAX 和大量 JS 的新手，但我需要替换 Laravel 网站上的一些旧的 Angular 功能。

我们只有一个带有静态/粘性标题搜索栏的页面，但没有提交按钮。它需要在搜索输入时进行实时过滤。也就是说，如果我输入沙发，它应该隐藏页面中没有沙发一词的任何内容。

Laravel Blade/HTML 是使用来自 Controller 数据的 foreach 循环构建的，但更重要的是，数据存储在名为 orderFormData 的 JSON 对象中，如下所示。

我需要一个简单有效的实时搜索过滤器来隐藏 JSON 和搜索栏之间不匹配的任何内容。该页面是用多个 HTML 表格构建的，因此我不想按表格进行过滤，我认为这太复杂了。通过 JSON 就足够了，也可以使用 AJAX。然而，我在这里完全是新手，我迫切需要解决方案。

这是搜索 html:

<div class="md-input-wrapper search-form">
            <form class="uk-search" id="searchProducts">
                <input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
                <span class="md-input-bar"></span>

            </form>
        </div>

这是我正在使用的 JSON 对象和一些 JS，但它不起作用:

<script type = "text/javascript">
var orderFormData = <?php echo json_encode ($tempdata);?>;

$(document).ready(function(){
$('#srch-term').on('keyup',function(){
    var searchTerm = $(this).val().toLowerCase();
    $('.uk-table tbody tr').each(function(){
        var lineStr = $(this).text().toLowerCase();
        if(lineStr.indexOf(searchTerm) === -1){
            $(this).hide();
        }else{
            $(this).show();
        }
      });
  });
});
</script>

这只是一个纯粹的 JS 想法，但我对 AJAX 也很感兴趣，看它是否更适合这种情况。如何通过绑定(bind)搜索栏和 JSON 对象来正确过滤页面上的项目？

Answer 1

你不需要Ajax来执行隐藏和显示的搜索功能，这只是操作DOM，相反，ajax可以从php调用json，并且使用jquery你可以简单地在按键上循环你的td并使用:contains在 jquery 中，onkeypress 调用一个函数，在这个函数中，如果包含“搜索”则显示和隐藏，否则隐藏。这是我的旧项目之一中的一个简单示例 #tabellaWebLog 是表的 idricercaUser 是输入搜索的 id，trTabellaWebLog 是我想要搜索的行的 id。ricUser 是表列的类在表内循环搜索...再见

user = $('#ricercaUser').val();
$('#tabellaWebLog').find("#TrTabellaWebLogRiga:not(:contains('"+ user +"'))").hide();   
$(".ricUser:contains('" + user + "')").parent().show();
$(".ricUser:not(:contains('" + user + "'))").parent().hide();