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

Question

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

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

Laravel blade/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来执行带有隐藏和显示的搜索函数，这只是简单地操作DOM，相反，Ajax可以从php调用json，使用jquery，您可以在按键时简单地循环td并使用：包含jquery，在按键时调用函数，在该函数中，如果包含"搜索"，则显示和隐藏，否则隐藏。在我的一个旧项目#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();