Директива wire:keydown.debounce

Директива wire:keydown.debounce является модификатором директивы wire:keydown. Она добавляет задержку перед вызовом метода компонента при вводе текста в поле ввода. В значение передается время задержки в миллисекундах или используется значение по умолчанию 150 мс. Это позволяет избежать частых вызовов метода при быстром наборе текста пользователем.

Синтаксис

<input type="text" wire:keydown.debounce="methodName" />

<input type="text" wire:keydown.debounce.500ms="methodName" />

Пример с задержкой по умолчанию

Давайте создадим поле ввода, которое при вводе обновляет свойство компонента с задержкой 150 мс:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class SearchComponent extends Component
	{
		public $search = '';
		public $result = '';
		
		public function updateSearch()
		{
			$this->result = "Searching for: " . $this->search;
		}
		
		public function render()
		{
			return view('livewire.search-component');
		}
	}
?>

<div>
	<input type="text" wire:model="search" wire:keydown.debounce="updateSearch" placeholder="Type something..." />
	<p>Result: {{ $result }}</p>
</div>

Результат выполнения кода:

<div>
	<input type="text" placeholder="Type something..." />
	<p>Result: Searching for: test</p>
</div>

Пример с указанием времени задержки

Давайте укажем задержку в 500 мс для обновления списка при вводе:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserSearch extends Component
	{
		public $query = '';
		public $users = ['John', 'Jane', 'Bob', 'Alice'];
		public $filtered = [];
		
		public function searchUsers()
		{
			$this->filtered = array_filter($this->users, function($user) {
				return stripos($user, $this->query) !== false;
			});
		}
		
		public function render()
		{
			return view('livewire.user-search');
		}
	}
?>

<div>
	<input type="text" wire:model="query" wire:keydown.debounce.500ms="searchUsers" placeholder="Search users..." />
	<ul>
		@foreach($filtered as $user)
			<li>{{ $user }}</li>
		@endforeach
	</ul>
</div>

Результат выполнения кода:

<div>
	<input type="text" placeholder="Search users..." />
	<ul>
		<li>John</li>
		<li>Jane</li>
	</ul>
</div>

Пример с передачей параметров

Давайте передадим параметр в метод при использовании задержки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataFetcher extends Component
	{
		public $input = '';
		public $items = [];
		
		public function fetchData($limit)
		{
			$res = [];
			for ($i = 1; $i <= $limit; $i++) {
				$res[] = $this->input . '-' . $i;
			}
			$this->items = $res;
		}
		
		public function render()
		{
			return view('livewire.data-fetcher');
		}
	}
?>

<div>
	<input type="text" wire:model="input" wire:keydown.debounce.300ms="fetchData(5)" placeholder="Enter text..." />
	<ul>
		@foreach($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

Результат выполнения кода:

<div>
	<input type="text" placeholder="Enter text..." />
	<ul>
		<li>abc-1</li>
		<li>abc-2</li>
		<li>abc-3</li>
		<li>abc-4</li>
		<li>abc-5</li>
	</ul>
</div>

Смотрите также

директиву wire:keydown,
которая вызывает метод при нажатии клавиши
директиву wire:keydown.enter,
которая реагирует только на клавишу Enter
директиву wire:keyup,
которая вызывает метод при отпускании клавиши
директиву wire:model.live,
которая обновляет свойство компонента при вводе