Search Function In Laravel With The Help OF JS

Step 1:- Write A Code In Html

<div class="col-12 p-3">
          <input type="text" class="form-control" name="manual_filter_table" id="filter_by_search" placeholder="Search .." style="font-size:18px; border:1px solid blue;">
        </div>

Step 2:- Make A Route

Route::get('/myorder_search', [App\Http\Controllers\Admin\PaymentController::class, 'myordersearch'])->name('myorder_search');

Step 3:- Make A New Function In controller

 public function myordersearch(Request $request)
    {
        $id = Auth::user()->id;
        $search = $request->input('search');

        $query = paypal::query();

        if (!empty($search)) {
            $query->where(function ($q) use ($search) {
                $q->where('org_slug', 'LIKE', '%' . $search . '%')
                    ->orWhere('payer_id', 'LIKE', '%' . $search . '%')
                    ->orWhere('payment_id', 'LIKE', '%' . $search . '%')
                    ->orWhere('payment_status', 'LIKE', '%' . $search . '%')
                    ->orWhere('influencer_name', 'LIKE', '%' . $search . '%')
                    ->orWhere(function ($q) use ($search) {
                        $q->whereRaw("DATE_FORMAT(created_at, '%Y-%m-%d') LIKE ?", ['%' . $search . '%'])
                            ->orWhereRaw("DATE_FORMAT(created_at, '%Y-%m') LIKE ?", ['%' . $search . '%'])
                            ->orWhereRaw("DATE_FORMAT(created_at, '%Y') LIKE ?", ['%' . $search . '%']);
                    })
                    ->orWhereRaw("CONCAT(amount, ' ', currency) LIKE ?", ['%' . $search . '%']);
            });
        }

        $users = $query->where('admin_id', $id)->get();

        $names = [];
        foreach ($users as $order) {
            $influencerNames = json_decode($order->influencer_name, true);
            foreach ($influencerNames as $name) {
                $names[] = $name['influencer_name'];
            }
        }

        $formattedNames = implode(' | ', array_unique($names));

        return response()->json([
            'users' => $users,
            'formattedNames' => $formattedNames
        ]);
    }

Step 4:- Write A Code In Javascript

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var filterInput = document.getElementById('filter_by_search');
    var rows = document.getElementsByClassName('order-row');

    filterInput.addEventListener('input', function() {
      var filterValue = filterInput.value.toLowerCase();

      // Perform AJAX request
      var xhr = new XMLHttpRequest();
      var url = getOrderRouteUrl(filterValue);
      xhr.open('GET', url, true);

      xhr.onload = function() {
        if (xhr.status === 200) {
          var response = JSON.parse(xhr.responseText);
          var users = response.users;
          var formattedNames = response.formattedNames;

          var container = document.getElementById('order-details-container');
          container.innerHTML = ''; // Clear previous data

          if (users.length > 0) {
            users.forEach(function(user) {
              var html = `
                <dl class="row">
                  <dd class="col-sm-4">Order From</dd>
                  <dt class="col-sm-8">${user.org_slug}</dt>
                  <dd class="col-sm-4">Influencer Names</dd>
                  <dt class="col-sm-8">${formattedNames}</dt>
                  <dd class="col-sm-4">Payer Id</dd>
                  <dt class="col-sm-8">${user.payer_id}</dt>
                  <dd class="col-sm-4">Payment Id</dd>
                  <dt class="col-sm-8">${user.payment_id}</dt>
                  <dd class="col-sm-4">Order Value</dd>
                  <dt class="col-sm-8">${user.amount} ${user.currency}</dt>
                  <dd class="col-sm-4">Order Status</dd>
                  <dt class="col-sm-8">${user.payment_status}<br></dt>
                  <dd class="col-sm-4">Order Date</dd>
                  <dt class="col-sm-8">${user.created_at}<br></dt>
                  <dd class="col-sm-4"></dd>
                  <dt class="col-sm-8">
                    <button type="button" class="btn btn-lg btn-secondary view-button" data-id="${user.id}">
                      Influencer Tasks
                    </button>
                  </dt>
                </dl>
                <dl class="row"></dl>
                <hr>
              `;
              container.innerHTML += html;
            });
          } else {
            container.innerHTML = 'No results found.';
          }
        }
      };

      xhr.send();
    });

    function getOrderRouteUrl(filterValue) {
      var baseUrl = "{{ route('myorder_search') }}";
      var encodedFilterValue = encodeURIComponent(filterValue);
      return baseUrl + '?search=' + encodedFilterValue;
    }
  });
</script>

Hopefully, It Will Help You !!!!

Related Posts

Modern DataOps Observability: A Practical Guide to Real-Time Data Monitoring

Introduction Organizations increasingly rely on fast event streams to power critical operational decisions. Applications across industries run on immediate analytical feedback loops: automated fraud prevention systems scoring…

Read More

Navigating Upcoming Events in Lucknow: Indie Stages, Concerts, and Art Spaces

Introduction Finding reliable, engaging activities across Lucknow often presents an unexpected challenge. Residents looking to unwind after a busy work week, college students seeking creative outlets, and…

Read More

Places to Visit in Bihar: An In-Depth Look at Regional History and Architecture

Introduction Planning a trip to eastern India often brings up questions about where to start, how connectivity works, and which heritage sites justify a visit. Bihar is…

Read More

Knee Replacement Surgery Guide: Symptoms, Surgical Options, and Physical Therapy

Introduction Persistent joint discomfort can disrupt everyday routines, making basic movements like climbing stairs, walking, or rising from a chair feel challenging. Finding effective knee treatment begins…

Read More

Complete Guide to Events in Kolkata: How to Discover What to Do

Finding something worthwhile to do across Kolkata often comes down to filtering noise rather than finding options. Between historic theatre corridors, contemporary auditorium programs, lively music venues,…

Read More

Enterprise Delivery Pipelines: Technical Strategies for DevOps Training China

Introduction Software development teams frequently experience severe delivery bottlenecks when handoffs between developers and operations engineers rely on manual interventions. Code that runs reliably on a developer’s…

Read More