jQuery autocomplete

PHPTutorial

Con il seguente tutorial andremo a speigare come integrare il widget autocomplete o suggerimento del campo su un campo input.

Per ottenere il risultato finale dovremo utilizzare il framework jQuery, HTML, PHP andiamo a vedere immediamente il codice

Come prima cosa è necessario scaricare il pacchetto jQuery UI e il tema personalizzato collegnado i rispettivi files.

<link rel="stylesheet" href="css/theme/ui.theme.css" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>


Fatto questo possiamo procedere con l'inserimento dell'input

<input value="Insert your tag here" id="autocomplete" />

A questo punto andiamo ad inserire il javascript che permette la visualizzazione dei suggerimenti nel campo, estrapolando i valori dal database.

$("#tags").autocomplete({source: "tagSearch.php"});

In fine andiamo a creare il file tagSearch.php nel seguente modo

require_once 'mysql_connect.php';
// connessione al db
$term = $_REQUEST['term'];
// recupero il valore passato dall'input
$reuturn_arr = array();
//dichiaro l'array
$fetch = mysql_query("SELECT * FROM tags WHERE MATCH(tagName) AGAINST('".$term."*')");
//loop dei dati
while ($row = mysql_fetch_array($fetch)) {
$row_array['value'] = $row['tagName '];
array_push($return_arr,$row_array);
}
//restituisco l'array in formato json
echo json_encode($return_arr);

Con questo codice potrai far visualizzare i suggerimenti nell'input creato.

Autore

Sviluppatore web, aree riservete e gestionali.
Svolgo con passione e determinazione il proprio lavoro dedicando tempo alla ricerca e all'approfondimento di novità.

Sito web dell'autore