Autocomplete
jQuery autocomplete
Ich habe mich für autocomplete von jQueryUI entschieden. Siehe https://jqueryui.com/autocomplete/
Einbinden Javascript
In den Header folgendes HTML:
# css
<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css">
# js
<script src='js/jquery-3.6.4.min.js'></script>
<script src='js/jquery-ui-1.13.2.custom/jquery-ui.js'></script>
<script type='text/javascript' src='js/autocomplete.js'></script>
Formularfeld
Die Input Felder sehen dann folgendermassen aus:
<div class="form-label">
PLZ: <span class="requiredmark">*</span>
</div>
<div class="form-value">
<input type="text" name="plz" value="" size="50" class="plz">
</div>
<div class="form-label">
ORT: <span class="requiredmark">*</span>
</div>
<div class="form-value">
<input type="text" name="ort" value="" size="50" class="ort">
</div>
<div class="form-label">
STRASSE: <span class="requiredmark">*</span>
</div>
Javascript
Das eigentliche Javascript js/autocomplete.js:
Hier wird die PLZ eingegeben. Wenn es genau einen Treffer gibt, wird das Feld "Ort" ausgefüllt, andernfalls ein Select angezeigt, und bei Auswahl eines Eintrags wird das Feld "Ort" ausgefüllt:
$( ".plz" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "ajax-reponse.php",
type: "POST",
dataType: "json",
data: {
plz: request.term
},
beforeSend: function( data ) {
$( ".ort" ).css('background-image', 'url(./images/loading5.gif)');
},
success: function( data ) {
$( ".ort" ).css('background-image', 'none');
if(data.length == 1) {
$( ".ort" ).val(data[0].id);
} else {
response( data );
}
}
} );
},
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
$( ".ort" ).val(ui.item.id);
}
});
Und hier die Funktion innerhalb eines Feldes. Gültige Strassen zu PLZ/Ort werden beim Tipopen als Select angezeigt. Bei Auswahl wird es direkt in das Feld geschrieben:
$( function() {
$( ".strasse" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "ajax-reponse.php",
type: "POST",
dataType: "json",
data: {
strasse: request.term,
plz: $('.plz').val(),
ort: $('.ort').val()
},
beforeSend: function( data ) {
$( ".strasse" ).css('background-image', 'url(./images/loading5.gif)');
},
success: function( data ) {
$( ".strasse" ).css('background-image', 'none');
response( data );
}
} );
},
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
} );
PHP AJAX
Sinngemäß wie folgt - ohne sanitize für die Werte:
// params
$plz = isset($_POST['plz']) && !empty($_POST['plz']) ? intval($_POST['plz']) : '';
$strasse = isset($_POST['strasse']) && !empty($_POST['strasse']) ? $_POST['strasse'] : '';
$ort = isset($_POST['ort']) && !empty($_POST['ort']) ? $_POST['ort'] : '';
// query
if(!empty($strasse) && !empty($plz)) {
if(!empty($ort)) {
$sql = "SELECT PLZ, Ort , Straße FROM `strassen` WHERE PLZ = " . $plz . " AND Straße LIKE '%" . $strasse . "%' AND Ort = '" . $ort . "' ORDER BY Straße";
} else {
$sql = "SELECT PLZ, Ort , Straße FROM `strassen` WHERE PLZ = " . $plz . " AND Straße LIKE '%" . $strasse . "%' ORDER BY Straße";
}
# get results
$mysqlResult = mysqli_query($dbConnection, $sql);
if($mysqlResult) {
for ($i=0; $i < mysqli_num_rows($mysqlResult); $i++)
{
$row = mysqli_fetch_assoc($mysqlResult);
$ret[] = [
'id' => $row["Straße"],
'label' => "" . $row["Straße"] ,
'value' => $row["Straße"] . ' '
];
}
// close
mysqli_free_result($mysqlResult);
}
}
// return
header('Content-type: application/json');
echo json_encode($ret);