Visualizzazione risultati 1 fino 1 di 1
Like Tree1Likes
  • 1 Post By NLSweb

Discussione: Autocompilazione di un Campo dati in remoto DB con PHP - JSON - jQuery

  1. #1
    NLSweb non Ŕ connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    654

    Smile Autocompilazione di un Campo dati in remoto DB con PHP - JSON - jQuery

    Partendo da questo post , ho deciso di pubblicare questa piccola guida.

    Quello che si vuole ottenere e' un form che autocompleti il campo prendendo i valori da un DB e nel momento che venga eseguito il POST del form , il dato vada ad aggiungersi al DB.

    Per farlo abbiamo bisogno di jQuery Autocomplete UI


    Quindi creiamo tre file : cerca.php , aggiungi.php , trova.html
    Nel mio esempio ho creato un DB con Tabella 'citta' con un solo campo 'nome'

    File:trova.html
    nel head richiamiamo le librerie jQuery
    poi inseriamo un piccolo script che dopo aver digitato i primi due caratteri esegue l'autocompilazione usando il file cerca.php
    nel body un semplice form che quando esegue il submit apre il file aggiungi.php per inserire il dato nel DB
    Codice HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
    <script>
    $(document).ready(function($){
        $('#citta').autocomplete({
    	source:'cerca.php', 
    	minLength:2
        });
    });
    </script>
    </head>
    <body>
    <form action="aggiungi.php" method="post">
        <input type="text" id="citta" name="nome" class="ui-autocomplete-input" />
        <input type="submit">
    </form>
    </body>
    </html>
    File:aggiungi.php
    un semplice file per scrivere il dato del form nel DB, chiaramente $server,$user,$password,$database devono essere completati con i vostri dati.
    Codice PHP:
    <?php
    $con
    =mysqli_connect($server,$user,$password,$database);
    if (
    mysqli_connect_errno()) {
      echo 
    "Failed to connect to MySQL: " mysqli_connect_error();
    }
    $name mysqli_real_escape_string($con$_POST['nome']);
    $sql="INSERT INTO citta (nome) VALUES ('$name')";
    if (!
    mysqli_query($con,$sql)) {
      die(
    'Error: ' mysqli_error($con));
    }
    mysqli_close($con);
    ?>
    File:cerca.php
    questo file preleva i dati inseriti nel form ed usando TERM ricerca nel DB i valori che hanno una corrispondenza
    quindi creai con JSON l'elenco con i valori trovati
    esempio: [{"value":"Milano","label":"Milano"}, ....
    Codice PHP:
    <?php
    $mysqli 
    = new MySQLi($server,$user,$password,$database);
    if(
    $mysqli->connect_error) {
      echo 
    'Database connection failed...' 'Error: ' $mysqli->connect_errno ' ' $mysqli->connect_error;
      exit;
    } else {
      
    $mysqli->set_charset('utf8');
    }
    $term trim(strip_tags($_GET['term'])); 
    $a_json = array();
    $a_json_row = array();
    if (
    $data $mysqli->query("SELECT * FROM citta WHERE nome LIKE '%$term%'")) {
        while(
    $row mysqli_fetch_array($data)) {
            
    $name htmlentities(stripslashes($row['nome']));
            
    $a_json_row["value"] = $name;
            
    $a_json_row["label"] = $name;
            
    array_push($a_json$a_json_row);
        }
    }
    echo 
    json_encode($a_json);
    flush();
    $mysqli->close();
    ?>

    chiaramente il codice e' sviluppato in modo minimale per far comprendere piu' facilmente il procedimento
    ed e' raccomandabile migliorarlo nel momento che si voglia implementare il codice.

    DEMO

    NLSweb
    Ultima modifica di alemoppo : 11-07-2014 alle ore 15.23.32 Motivo: [code] -> [html] e [php]
    magnare likes this.

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •