如何使用 Laravel + JavaScript 创建搜索过滤器?

2024-04-19

我最近创建了一个 JavaScript 过滤器来过滤产品表中的数据,我有 5 个字段可以输入搜索,它们是:描述、型号、经销商和库存。我将表与另一个视图中的产品分开,并将字段保留在索引中。

我需要该表返回我在字段中输入的值。我举了一个用“描述”字段制作的示例。由于代码变得很大,我对其他字段使用相同的逻辑。

我的输入:

 <input class="form-control"  placeholder="Descrição" placeholder="Descrição" id="descricao" value="{{ session('descricao') }}" name="descricao">

从视图中看我的脚本

<script src="{{ asset('assets/js/ProductSearch.js') }}"></script>
<script>
        var postSearch = '{{ route('product::searchPost') }}';
        var searchRequest = {
            'descricao':'{{session('descricao')}}',
            'model': '{{ session('model') }}',
            'distributor': '{{ session('distributor') }}',
            'status': '{{ session('status') }}',
            'stock' : '{{ session('stock') }}',
            'image' : '{{ session('image') }}',
        };
    </script>

我的表格视图

<table class="table table-striped table-bordered" id="tableProd" class="table table-bordered">
    <tr>
        <th><center>Imagem</center></th>
        <th>SKU</th>
        <th><center>Produto</center></th>
        <th>Custo</th>
        <th>Preço</th>
        <th>Atualização</th>
        <th>Status</th>
        <th>Estoque</th>
        <th>Distruibuidor</th>
        <th>Categoria</th>
    </tr>
    @foreach($product as $prod)
        <tr>
            <tbody>
            <td><img src="{{$prod->image->erp_image}}" style="width: 50px; height: 50px;" alt="" id="ProdImage"></td>
            <td>{{$prod->erp_model}}</td>
            <td>{{$prod->description->erp_name}}</td>
            <td>R$ {{$prod->erp_cost}}</td>
            <td>R$ {{$prod->erp_price}}</td>
            <td>{{ $prod->erp_modifieddate}}</td>
            <td style="max-width: 45px">
                @if($prod->status == 1)
                    <span class="label label-success">Ativo</span>
                @else
                    <span class="label label-danger">Inativo</span>
                @endif
            </td>
            <td>{{ $prod->erp_quantity}}</td>
            <td>{{ App\Helpers\ProductDistributorHelper::$distributor[$prod->erp_distributor] }}</td>
            <td>
                @foreach($prod->category as $category)
                    {{$category->erp_name}}
                @endforeach
            </td>
</tr>
</table>

我的产品-search.js

$(document).ready(function() {
    $(document).on('blur', '#descricao', function() {
            var descricao = $('#descricao').val();
            searchRequest['descricao'] = descricao;
            doSearch();
        });
});
    function doSearch() {
    $.post(postSearch, {
            'search_data': JSON.stringify(searchRequest),
            '_token': $('meta[name=csrf-token]').attr('content'),
        }
        , function(data) {
            $('#product-table').html(data);
        });
}

我的控制器

public function search(Request $request)
    {
        $product = Product::query();
if($request->isMethod('post'))
        {
$descricao = $data->descricao;
session(['descricao' => $descricao]);
if(strlen(session('descricao')) > 0)
            {
                $product_ids = Description::where('erp_name', 'LIKE', '%'.session('descricao').'%');
                $ids = [];

                foreach($product_ids as $product_data){
                    $ids[] = $product_data->erp_productid;
                }

                $product = $product->whereIn('erp_productid', $ids);
            }

有什么建议吗?


None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Laravel + JavaScript 创建搜索过滤器? 的相关文章

随机推荐

  • React:未捕获类型错误:无法读取未定义的属性

    这个问题已经解决了 向下滚动或点击这里 https stackoverflow com a 73523801 19124473查看解决方案 我正在尝试使用 React 从我的服务器中提取 JSON 数据并使用两个函数渲染它 但是两个渲染函数
  • App Engine:基于环境的不同 app.yaml 文件

    我目前正在将一个应用程序迁移到 Google App Engine 该应用程序依赖于各种外部连接的环境变量 看起来 app yaml 文件是我应该设置这些配置的地方 但是如何管理这些变量可能不同的不同环境 开发 测试 登台 生产 最简单的解
  • 如何在 iPhone 中设置此布局需要一些帮助

    I have Implement Some paint like application For that the Layout is like as below 这里有一个视图和两个按钮 在我的应用程序中 我从 Button2 选择颜色
  • 使用 Angular 2 连接 Google Maps Nativescript 插件

    我正在尝试使用 Nativescript 的 Google 地图插件 https github com dapriett nativescript google maps sdk https github com dapriett nati
  • Android JNI,有什么方法C++代码可以直接读取应用程序的sqlite数据库吗?

    我正在开发一个带有 Java 组件和通过 JNI 的 C 组件的 Android 应用程序 C 组件用于其他平台 如果 C 组件可以查询现有的 SQLite 数据库 通过 SQLite C API 而无需向 Java 端进行 shell 调
  • SQL Server 根据不同标志计算累计总和/条件运行总和

    我在 SQL Server 中有一个表 其中的数据类似于此示例 ID Flag Art No Amount 1 U A1000 100 2 U B2000 5 3 V B2000 900 4 U B2000 10 5 I B2000 50
  • PHP:PDF 生成

    我目前正在一个网站上工作 基本上 当用户搜索某些内容时 我应该能够为每个搜索结果项生成 pdf 我知道 fpdf 的一种选择 有没有比 fpdf 更简单的东西或某些服务 例如如果我发送搜索结果页面的 url 它会将生成的 pdf 发送回给我
  • Lua:冒号符号、“自我”和函数定义与调用

    我对定义 调用 Lua 函数时使用的冒号表示法感到非常困惑 我以为我已经明白了 直到我看到这段代码 function string PatternSafe str return str gsub pattern escape replace
  • 如何“全局”“重载”python的打印函数?

    我使用的是 python 2 6 6 我需要重载默认的 python 打印函数 我需要这样做 因为此代码可能在必须使用内置函数来生成输出的系统上使用 否则不会显示任何输出 举例来说 如果你有一个像这样的 python 脚本 from fut
  • 是否可以像在 CodeIgniter 中一样获取 ExpressionEngine 中的所有后期变量?

    在 CI 的控制器中 您可以通过执行以下操作来获取所有后置变量 data this gt input gt post 在 EE 由同一个人基于 CI 构建 中 类似的语法是 data this gt EE gt input gt post
  • 将 UITableView 分隔符隐藏在 contentView 后面

    我在 iPhone OS 3 0 中制作了一个分组 UITableView 如下图所示 结果是 OS 3 1 中的正确图像 imageView 位于分隔符下方 我尝试将内容视图放在前面 当 tableView 处于分组样式时 我自己绘制分隔
  • JPA 与 Hibernate 3.6.8.Final、PostgreSQL 9.1、SQLGrammarException - 配置问题?奇怪的SQL语句

    Edit SOLVED正确的 我发现了让我困惑的事情 我使用 pgadmin 创建表和其他数据库内部结构 现在检查 如果名称 表名称 列名称 pk 名称等 中至少有一个字母为大写 则 pgadmin 在 SQL 创建脚本中使用它实际上 使用
  • ASP.Net 在会话 cookie 中存储用户密码?

    我知道会员资格提供商将用户名和过期时间存储在加密的 cookie 中 然后使用它来验证用户是否仍然登录会话 是否也可以将用户密码存储在这个加密的 cookie 中 如果是这样 您将如何在服务器端访问它 我需要服务器端可用的用户名和密码 因为
  • MySQL + Code First + 延迟加载问题!

    在一个非常简单的房地产程序中 我尝试使用 EF Code First 列出房屋的所有图像 附加到我拥有的现有数据库 我使用 MySQL Conector 6 3 6 这是我的代码 namespace CodeFirstMySQL class
  • 通过 unix shell 命令查找给定文件扩展名的首选应用程序

    这可能不是strictly关于编程 但如果我找不到现成的解决方案 它可能会成为一个编程任务 在 UNIX 上 用于确定给定文件类型的用户首选应用程序的命令行方法是什么 我理想的解决方案是一个命令 让我不必执行以下操作 okular foo
  • OnItemCLickLIstener 不适用于 ListView

    我有一个带有 ListView 的活动 具有自定义视图的 ListView 我将 OnItemClickLIstener 添加到 ListView 中 当我点击项目时 结果我什么也没看到 ListView 的活动
  • 从日期中减去时间 - 时刻 js

    例如我有这个日期时间 01 20 00 06 26 2014 我想减去这样的时间 00 03 15 之后我想将结果格式化为这样 3 hours and 15 minutes earlier 我怎样才能做到这一点使用moment js edi
  • useReducer Action 调度两次

    Scenario 我有一个返回操作的自定义挂钩 父组件 Container 利用自定义钩子并将操作作为 prop 传递给子组件 Problem 当从子组件执行操作时 实际调度会发生两次 现在 如果子级直接使用钩子并调用操作 则调度仅发生一次
  • 当我不知道它是否是临时的时,C++ 返回类型

    假设Foo是一个相当大的数据结构 我应该怎样写一个const返回实例的虚函数Foo 如果我不知道继承的类是否会存储Foo内部 因此 允许通过引用返回 如果我无法在内部存储它 我的理解是我无法返回const引用它 因为它将是临时的 它是否正确
  • 如何使用 Laravel + JavaScript 创建搜索过滤器?

    我最近创建了一个 JavaScript 过滤器来过滤产品表中的数据 我有 5 个字段可以输入搜索 它们是 描述 型号 经销商和库存 我将表与另一个视图中的产品分开 并将字段保留在索引中 我需要该表返回我在字段中输入的值 我举了一个用 描述