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);