PHP - Ricerca Automatica con AJAX

Introduzione

Ciao! Benvenuti nel nostro viaggio nel mondo della programmazione con PHP e AJAX. Oggi, esploreremo come creare una funzionalità di ricerca automatica utilizzando PHP e AJAX. Questo tutorial è progettato per i principianti che non hanno esperienza precedente nella programmazione. Allora, mettiamoci all'opera!

PHP - AJAX Auto Complete Search

Il Documento XML

Prima di creare la nostra funzionalità di ricerca automatica, dobbiamo configurare un documento XML che servirà come nostra fonte di dati. Un documento XML è una raccolta di dati memorizzati in un formato strutturato che può essere facilmente letto sia dagli esseri umani che dalle macchine. In questo caso, il nostro documento XML conterrà un elenco di città in tutto il mondo.

<?xml version="1.0" encoding="UTF-8"?>
<cities>
<city>New York</city>
<city>Los Angeles</city>
<city>Chicago</city>
<city>Houston</city>
<city>Phoenix</city>
<city>Philadelphia</city>
<city>San Antonio</city>
<city>San Diego</city>
<city>Dallas</city>
<city>San Jose</city>
</cities>

Salvate questo documento XML come cities.xml nella stessa directory del vostro file PHP.

Codice JavaScript

Ora che abbiamo il nostro documento XML pronto, è il momento di scrivere del codice JavaScript per recuperare i dati dal documento XML e visualizzarli in una lista a discesa quando l'utente inizia a digitare nella casella di ricerca. Useremo AJAX per ottenere questo risultato senza ricaricare la pagina.

Prima, creiamo un modulo HTML con una casella di ricerca e una lista a discesa:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Ricerca Automatica</title>
</head>
<body>
<form id="searchForm">
<input type="text" id="searchBox" onkeyup="showSuggestions(this.value)">
<select id="suggestionList"></select>
</form>
<script src="autocomplete.js"></script>
</body>
</html>

Successivamente, scriviamo il codice JavaScript in un file separato chiamato autocomplete.js:

function showSuggestions(str) {
if (str.length == 0) {
document.getElementById("suggestionList").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("suggestionList").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "get_suggestions.php?q=" + str, true);
xmlhttp.send();
}
}

In questo codice, definiamo una funzione chiamata showSuggestions che accetta una stringa come input. Quando l'utente digita qualcosa nella casella di ricerca, questa funzione viene chiamata con il valore dell'input. Se la lunghezza dell'input è zero, puliamo la lista di suggerimenti. Altrimenti, creiamo un oggetto XMLHttpRequest per inviare una richiesta AJAX a un file PHP chiamato get_suggestions.php con il parametro di query q impostato sul valore dell'input.

Codice PHP

Ora, passiamo al lato PHP delle cose. Creeremo un file chiamato get_suggestions.php che gestirà la richiesta AJAX e restituirà i nomi delle città corrispondenti come una lista HTML:

<?php
$query = $_GET['q'];
$xml = simplexml_load_file('cities.xml');
$matchingCities = array();

foreach ($xml->city as $city) {
if (strpos(strtolower($city), strtolower($query)) !== false) {
$matchingCities[] = $city;
}
}

echo '<ul>';
foreach ($matchingCities as $city) {
echo '<li>' . htmlspecialchars($city) . '</li>';
}
echo '</ul>';
?>

In questo codice PHP, carichiamo il documento XML utilizzando la funzione simplexml_load_file. Poi, iteriamo attraverso ogni città nel documento XML e controlliamo se la stringa di query è presente nel nome della città (ignorando la differenza tra maiuscole e minuscole). Se una corrispondenza viene trovata, aggiungiamo la città all'array $matchingCities. Infine, outputtiamo una lista non ordinata (<ul>) contenente i nomi delle città corrispondenti come elementi della lista (<li>).

Ecco fatto! Ora avete una funzionalità di ricerca automatica di base utilizzando PHP e AJAX. Ricordate di posizionare tutti e tre i file (index.html, autocomplete.js, e get_suggestions.php) nella stessa directory e aprire index.html in un browser web per vedere la casella di ricerca in azione.

Mentre continuate il vostro viaggio nella programmazione, scoprirete che ci sono molti modi per implementare funzionalità di ricerca automatica, come l'uso di framework come React o Angular, o persino l'uso di moderne librerie frontend come Vue.js o Svelte. Ma per ora, questo esempio semplice dovrebbe darvi una solida base su cui costruire.

Buon coding!

Credits: Image by storyset

Tutorial precedente:

PHP - Analizzatore XML AJAX

Prossimo tutorial:

PHP - Esempio di Feed RSS AJAX