Autocomplete jquery con php/mysql

filomeni · 8 Feb 2016

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: http://www.flylantern.it/jquery/jquery-ui.min.js.
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:

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:

HTML:

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

Potete fare un test direttamente da questo indirizzo: http://www.flylantern.it/autocomplete.php

Bey By Maurizio Filomeni

Cerca

Cerca

Autocomplete jquery con php/mysql

filomeni

Moderatore

Discussioni simili