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.