{ Autocomplete JQuery con PHP & MySql }

Autocompletare un campo di ricerca o input

In pochissime righe un utile Widgets Jquery interfacciato con database MySql. Ho preparato una pagina PHP completa che funziona perfettamente pronta per un fantastico copia/incolla Questo sistema è molto utile, come nel mio caso, per favorire la ricerca di prodotti/articoli "pilotando" l'utente sui prodotti che potrebbero essere di loro interesse... Nel codice sono necessarie le librerie Jquery, il file jquery-ui.min.js è importante per il funzionamento e l'ho opportunamente minimizzato mantenedo solo il codice necessario per "L'Autocomplete" lo potete scaricare da questa posizione: file JQuery
Potete notare nel campo input di tipo testo l'ID nominato autocomplete che viene richiamato nella funzione Jquery:

Codice:
$( "#autocomplete" ).autocomplete({
	source: availableTags,
	minLength: 3
});

L'istruzione minLength: 3 serve a far intervenire l'autocomplete dopo aver digitato il terzo carattere nel campo di ricerca, quindi potete cambiare il valore a vostro piacimento... Quello che è necessario fare è richiamare dal database con un ciclo while tutte le parole che abbiamo inserito in esso:

Codice:
<?php
require_once('connessione.php');//connessione al vostro db
    $sql="SELECT * FROM  search_auto";
    $rs=@mysql_query($sql) or die("Error query Database: ".mysql_error());
        while($row=mysql_fetch_array($rs)){

    $key=$row['key'];
?>

Importante vi ricordiate di stabilire la connessione al db (connessione.php), faccio successivamente la query estraendomi con un ciclo while tutte le "occorrenze" che verranno racchiuse nella variabile $key che a loro volta vengono passate alla variabile javascript "availableTags"

Codice:

var availableTags = [
	<?php
         ....
	?>
	];

ed in fine con la funzione Jquery vengono restituite le occorrenze richiamate dal campo input con id autocomplete:

Codice:
$( "#autocomplete" ).autocomplete({
	source: availableTags,
	minLength: 3
});

Il codice è molto "spartano", andrebbe condito con un pò di css, ma questo lo lascio a voi... ecco la pagina completa:

Codice:
<html>
    <head>
            <title>Autocomplete - By: Filomeni</title>
	    <meta name="description" content="Ricerca immediata di tutto il catalogo dei nostri prodotti, cerca con  semplicità ed efficacia..." />
		  <style>
		  .ui-menu {
			list-style: outside none none;
			padding: 0px 70% 0px 0px;
			margin: 0px;
			display: block;
			outline: medium none;
			cursor: pointer;
			z-index: 1000;
		}
		  </style>
    </head>
	<form action="#" method="POST">
	
      <input id="autocomplete" value="" name="testo" tabindex="21" type="text" placeholder="Cerca Prodotti" autocomplete="off">
      <input value="Cerca" tabindex="22" type="submit">
    </form>

<!--Autocomplete search-->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>	
	
<script type="text/javascript">
	var availableTags = [
	<?php
	require_once('php/config.php');//connessione e recupero cookie di sessione se l'utente non è loggato
	$sql="SELECT * FROM  search_auto";
	$rs=@mysql_query($sql) or die("Error query Database: line 23 ".mysql_error());
		while($row=mysql_fetch_array($rs)){

	$key=$row['key'];
	echo "'$key',";
		}
	?>
	];
$( "#autocomplete" ).autocomplete({
	source: availableTags,
	minLength: 3
});
</script>	
<!--End Autocomplete search-->		
</body>
</html>

Siti Web

Da 20 anni Filomeni Maurizio si dedica con passione e tenacia al mondo del web, le sue realizzazioni sono sempre all'avanguardia perchè la sua passione divenuta professione è al passo con i tempi e sempre in fase di studio e ricerca. Grazie ai suoi collaboratori riesce a dedicare il maggior tempo alla programmazione back-end rendendo le applicazioni molto precise e sofisticate. Dopo un attento monitoraggio, Siti Web diventa Partner Partnership di Aruba Group S.p.A

Newsletter & Info

Iscriviti alla nostra newsletter per ricevere aggiornamenti e novità, non riceverai mail indesiderate da parte nostra, odiamo lo spam!


Ti Piace Siti Web?