Autocomplete jquery con php/mysql

filomeni

Moderatore
Membro dello Staff
MOD
14 Mag 2006
1.052
6
38
50
Roseto degli Abruzzi (TE)
www.sitiweb.cloud
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";
	[email protected]_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";
	[email protected]_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
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
M jquery autocomplete multiple values data source jQuery 0
andrea.peo Autocomplete Jquery php mysql su più campi inpunts jQuery 8
C Autocomplete jquery che non filtra! PHP 0
A Jquery Autocomplete non mi funziona Javascript 3
ypsilon86 Autocomplete Jquery jQuery 10
max1974 autocomplete trigger select jQuery 0
D [ASP] Autocomplete cerca su 2 campi del db Classic ASP 1
V autocomplete su più campi Ajax 1
S Autocomplete va in locale ma non su Aruba jQuery 1
M Form con campi autocomplete Javascript 1
felino JqueryUi Combo Autocomplete e Validation jQuery 1
M Filtrare AutoComplete Extender Ajax 1
W Aiuto su AUTOCOMPLETE Javascript 0
MarcoGrazia Validazione remota tramite plugin (jquery validate) Snippet Javascript 0
M Come selezionare e deselezionare radiobutton con jquery jQuery 1
M Come validare textarea con jquery jQuery 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
MarcoGrazia jquery validate() controllo checkbox jQuery 2
D assegnare risultato di una jquery ad una text Javascript 2
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A php metodo post jquery non da mai errore jQuery 4
T problema con select dinamica con jquery Javascript 0
P jquery .load jQuery 10
E Div che scompare con scroll jquery Javascript 0
T script jquery non funziona più dopo il passaggio a MVC jQuery 5
B jQuery - hide & show li items jQuery 13
Y jQuery Animation Switch On Off jQuery 0
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
O [Javascript] Conflitto Jquery: forse... Javascript 0
MarcoGrazia jquery validate, necessità di validare almeno un elemento select su due jQuery 1
M inserire i dati ottenuti da una jquery in una tabella già esistente jQuery 1
D Jquery, conflitto tra loro risolvibile? jQuery 7
M Filtrare risultati con valori checkbox passati con jquery jQuery 2
Tommy03 Variabile PHP dentro a JQuery PHP 3
L Problema jQuery validation AJAX (PHP 7) PHP 6
G Campo HTML input file con jQuery jQuery 0
P Jquery event nel foreach php jQuery 3
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
trattorino Mentions Auto Suggesting da jquery a php PHP 2
X Problema con jquery e ajax jQuery 2
G Inserzione script nella pagina html per jquery jQuery 8
MarcoGrazia Validazione forum con jquery.validate jQuery 2
Shyson Smoot scrolling jQuery nella pagina jQuery 0
felino [Javascript] [jQuery] Slick Carousel: visualizzare una porzione dell'immagine successiva Javascript 0
L Scelta form con jquery jQuery 1
F [Javascript] Aprire file tramite jquery Javascript 0
R Aiuto Jquery jQuery 1

Discussioni simili