Autocomplete jquery con php/mysql

Discussione in 'Snippet Javascript' iniziata da filomeni, 8 Febbraio 2016.

  1. filomeni

    filomeni Moderatore Membro dello Staff MOD

    Registrato:
    14 Maggio 2006
    Messaggi:
    1.039
    Mi Piace Ricevuti:
    6
    Punteggio:
    38
    Sesso:
    Maschio
    Occupazione:
    Web Developer
    Località:
    Roseto degli Abruzzi (TE)
    Home Page:
    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
     
    Ultima modifica: 8 Febbraio 2016
Sto caricando...

Condividi questa Pagina