使用JS或AJAX通过页面上的JSON对象进行实时搜索过滤（laravel）答案

【问题标题】：Using JS or AJAX to live search filter through JSON object on page (laravel)使用JS或AJAX通过页面上的JSON对象进行实时搜索过滤（laravel）
【发布时间】：2017-11-13 19:07:25
【问题描述】：

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

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

Laravel 刀片/HTML 是使用来自控制器数据的 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 也很感兴趣，如果它在这种情况下能更好地工作的话。如何通过绑定搜索栏和 JSON 对象正确过滤页面上的项目？

【问题讨论】：

这不是纯JS，这是jQuery。
我应该指定的，抱歉。我对纯 js 或 jquery 很好，唯一的问题是它不能有角度，因为它已被删除

标签： javascript jquery json ajax laravel

【解决方案1】：

你不需要 Ajax 来做一个隐藏和显示的搜索功能，这只是操纵 DOM，而不是 ajax 可以从 php 调用 json 并且使用 jquery 你可以简单地循环你的 td 按键并使用 :contains jquery，onkeypress 你调用一个函数，在这个函数中你会显示和隐藏，如果包含“搜索”显示，否则隐藏。这是我的一个旧项目#tabellaWebLog 中的一个简单示例，它是表的 id，ricercaUser 是输入搜索的 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();

【讨论】：