Prevent network request on every time input change - laravel-livewire

Question

I am currently trying to prevent the network request that livewire sends on every time I type something in my input element but not able to figure out the exact reason so far.
I have one modal component and inside that, I have the input element like this. Even the input element has no wire:model or nothing just the plain input with bootstrap class.
<input type="text" class="form-control" />
I tried adding wire:ignore and everything but still I can see in the network tab that request is being sent every time when input changes and I want to prevent that.
Basically, I also have some elements where jQuery plugin select2 has been used with search feature and when I even search inside that generated search input with jQuery, network request keeps firing and select2 hides automatically.
Inside my livewire js hook i have added some code to initialize the select2 plugin after message is processed so that select2 is not broken but in this case I don;t want to send request at all.
document.addEventListener("DOMContentLoaded", () => {
Livewire.hook('message.processed', (message, component) => {
initSelect2(component);
})
});
How can I prevent all network requests that are firing back and forth between frontend and backend for any type of input element?

Answer 1

You can use wire:model.lazy="yourModel", this will result in updates (network requests) only happening when the user click away from the input field.
There's also wire:model.defer="yourModel" which will first trigger when you e.g. do a wire:click on a button.
Lazy Updating
By default, Livewire sends a request to the server after every input event (or change in some cases). This is usually fine for things like elements that don't typically fire rapid updates, however, this is often unnecessary for text fields that update as the user types.
In those cases, use the lazy directive modifier to listen for the native change event.
<input type="text" wire:model.lazy="message">
Now, the $message property will only be updated when the user clicks away from the input field.
Deferred Updating
In cases where you don't need data updates to happen live, Livewire has a .defer modifer that batches data updates with the next network request.
For example, given the following component:
<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>
As the user types into the field, no network requests will be sent. Even if the user clicks away from the input field and onto other fields on the page, no requests will be sent.
When the user presses "Search", Livewire will send ONE network request that contains both the new "query" state, AND the "search" action to perform.
This can drastically cut down on network usage when it's not needed.
The above is from: https://laravel-livewire.com/docs/2.x/properties