How to debounce text input when using Inertia's useForm()?

To debounce the submit method only on the search input when using Inertia's useForm(), you can use a computed property along with the lodash debounce function.

Here's an example of how you can achieve this:

import { useForm } from '@inertiajs/inertia-vue3'
import { debounce } from 'lodash'

export default {
  setup() {
    const form = useForm({
      areas: null,
      county: null,
      school: null,
      search: null
    })

    const debouncedSubmit = debounce(() => {
      form.submit()
    }, 500)

    return {
      form,
      debouncedSubmit
    }
  }
}

In this solution, we import the useForm function from @inertiajs/inertia-vue3 and the debounce function from lodash. We then create a computed property called debouncedSubmit that wraps the form.submit() method with the debounce function, specifying a delay of 500 milliseconds.

Now, you can use debouncedSubmit as the submit method in your template:

<template>
  <div>
    <input type="text" v-model="form.search" @input="debouncedSubmit" />
    <!-- Other inputs -->
  </div>
</template>

By using @input="debouncedSubmit", the debouncedSubmit method will be called only after the user has finished typing for 500 milliseconds. This effectively debounces the submit action on the search input.

Note: Make sure to install lodash by running npm install lodash or yarn add lodash before using the debounce function.