How to implement the most efficient database search method in Laravel's Inertia/Vue

Question

I want to search the customer list and change the component as is.

I am currently searching for a specific customer using this link /customer/$searchColumn/$searchTerm?page=4

This is what my controller returns

return Inertia::render('Dashboard', [
    'customers' => Customer::whereLike("nr", (string)$request)->paginate(10),
]);

Renders a paginated table of all found items.

Vue is currently very simple:

<pre class="snippet-code-html lang-html prettyprint-override"><code><script setup>
  import { usePage } from '@inertiajs/vue3'
  import Pagination from '@/mycompany/Pagination.vue';
  const page = usePage()
</script></code>

On the front end, I render a table using:

<pre class="snippet-code-js lang-js prettyprint-override"><code>v-for="customer in $page.props.customers.data"</code>

I want a search box at the top of the table that reloads the results as I type.

I don't know where to start.

Answer 1

For this case, you can use regular ajax/fetch requests to complete.

Inertia still utilizes laravel for routing, so it's impossible to complete this kind of form request without some kind of request or redirect.

Even the creator of inertia.js supports using xhr/fetch requests with inertia.