Trying to implement search in the Customers.vue page. It works, but loses focus after each entry. Also getting a 409 error
CustomerController
``public function index(Request $request): Response { $search = $request->input('search'); $customers = Customer::query() ->when($search, function ($query, $search) { $query->where('first_name', 'like', '%' . $search . '%'); }) ->paginate(15); $customers->appends(['search' => $search]); return Inertia::render('Customers/Index', [ 'customers' => $customers, ]); }''
Customer route
Route::get('/customers', [CustomerController::class, 'index'])->name('customers');
Customer.vue
<input type="text" name="search" id="search" placeholder="Search..." v-model="search"/>
Customer
let search = ref(''); watch(search, (value) => { Inertia.get('/customers', { search: value } , { preserveState: true, }); });
This is a basic partial reload scenario; you can use the router from Inertia instead; and also, you can pre-populate the input from the query string:
import {router} from "@inertiajs/vue3";
let queryParams = new URLSearchParams(window.location.search)
let search = ref(queryParams.get('search') || '')
watch(search, (value) => router.reload({only: ['customers'], data: {search: value}}))
@tykus Fantastic! It works. I'll have to study it awhile to see why though...
I'm curious - the code I was using was from a Jeffrey Way's youTube tutorial. The only difference is that I'm using Jetstream - is there something in Jetstream that would make it not work that way?
@flourgirl I don't know which version of Inertia might have been used in that series compared with your version now; however, it is not likely that Jetstream had any influence on the outcome.
If you're all set, please mark the thread closed with a Best Reply above.
Please or to participate in this conversation.