Question

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

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

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对象来正确过滤页面上的项目？

Answer 1

你不需要Ajax来使用hide和show来执行搜索功能，这只是操作DOM，而ajax可以从php调用json并使用jquery你可以简单地在keypress上循环你的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();

使用JS或AJAX在页面上通过JSON对象实时搜索过滤器（laravel）

1 个答案: