Autocomplete pomocí jQuery/PHP

Ukázka jednoduchého skriptu na realizaci autocomplete pro textový input v HTML formuláři. Toto je užitečné hlavně v případě, kdy je možné zadat více položek než snese klasický select.

Autocomplete je realizován pomocí jQuery a data získává z PHP skriptu, který je posílá jako JSON.

HTML kód je poměrně jednoduchý:

<!doctype html> <html> <head> <title>Autocomplete - z.moravec.net</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $( "#input" ).autocomplete({ source: 'autocomplete.php', appendTo: "#container", }); }); </script> <style type="text/css"> ... </style> </head> <body> <h1>Ukázka autocomplete</h1> <input type="text" name="input" id="input"> </body> </html>

Pro správnou funkci potřebujeme jQuery a jQuery UI. Data pro autocomplete jsou získávána z PHP skriptu autocomplete.php. To je nastaveno pomocí jQuery kódu.

<script type="text/javascript"> $(document).ready(function () { $( "#input" ).autocomplete({ source: 'autocomplete.php', appendTo: "#container", }); }); </script>

Standardně získáváme data z databáze, pro jednoduchost tady mám ukázku s využitím pole.

<?php $array = Array('VSEPR', 'Rovnice', 'Neutralizace', 'Chemie', 'Elektrochemie', 'Voda', 'Amoniak', 'NMR'); $out = Array(); $term = Trim($_GET['term']); foreach($array as $word) { if(preg_match("/$term/i", $word)) { $out[] = $word; } } sort($out); echo json_encode($out); ?>

Řetězec z inputu získáme v PHP v proměnné $_GET[‘term’]. Tento řetězec pak porovnáme s jednotlivými prvky pole $array. Pokud vyhovují, vloží se do výstupního pole. Nakonec prvky pole seřadíme podle abecedy a odešleme jako JSON řetězec.

Praktická ukázka je zde.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.