Vyhledávání přes Ajax – jak na to?

nuller

Ahoj, mohli byste mi prosím poradit, jak postupovat v případě, že chci na stránku vložit vyhledávací pole, které bude zpracováno Ajaxově? Představuji si to tak, že při zadání minimálně 2 znaků dojde k prohledání databáze a vypsání výsledků pod vyhledávacím polem. Výsledek by pak byl s každým dalším napsaným znakem aktualizován. Je to takové live search. Lze to vytvořit s pomocí snippetů?

Díky moc

Vojtěch Dobeš

Určitě to jde pomocí snippetů. Doporučuju využít nette.ajax.js pro jejich zpracování na straně klienta.

{snippet results}
{foreach $results as $result}
	...
{/foreach}
{/snippet}

public function handleSearch($term)
{
	$this->template->results = // ... vyhledání záznamů podle $term
	$this->redrawControl('results');
}

$('input').on('change input', function () {
	var value = $(this).val();
	if (value.length >= 2) {
		$.nette.ajax({
			'url': // url směrující na signál search!
			'data': {
				term: value
			}
		});
	}
});

Editoval vojtech.dobes (28. 1. 2014 12:38)

Etch

$('input').on('change input', function () {

Pravděpodobně bude muset přidat ještě keyup. oninput pokud vím funguje až od IE9 a onchange se zase spustí až když se unfocusne daný input.

Dále bych na tyto věci doporučil použít debounce nebo throttle.

Vojtěch Dobeš

@Etch Dobré poznámky, díky.

nuller

Perfektní. Díky za pomoc!