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

Navigating Your Ultimate Goa Itinerary: Best Places to Visit Safely

Introduction Planning a trip to India’s most iconic coastal paradise can feel overwhelming, but finding the absolute best places to visit in Goa doesn’t have to be…

Read More

The Ultimate Checklist for Planning Cosmetic Surgery Abroad Safely

Introduction The quest for self-improvement and aesthetic refinement has evolved from a localized luxury into a highly accessible global phenomenon. Today, patients seeking transformative treatments are no…

Read More

Evolution of Platform Engineering and Data-Driven Software Delivery Practices

Introduction In the modern technology ecosystem, the capability to deliver software rapidly, reliably, and securely is a definitive competitive advantage. Finding and implementing the Best DevOps Tools…

Read More

Adventure Activities in India: Top Places to Explore

Introduction India is less of a single country and more of a vibrant, sensory-rich continent bound together by shared history and deep-rooted traditions. For any global traveler,…

Read More

Streamlining Automated Data Pipelines Using Enterprise DataOps Best Practices

Introduction In modern cloud environments, businesses generate massive amounts of information every single second. Managing this information manually creates massive operational bottlenecks, delays business intelligence insights, and…

Read More

Modern DataOps Infrastructure: Unlocking the Power of Observability Platforms

Introduction Modern enterprise data architectures are growing increasingly complex. Today, an ordinary business analytics pipeline might ingest streaming IoT logs, batch-load transactional customer databases, transform those layers…

Read More