Autocompletado con MySQL, PHP y Javascvript

Archivo index.php:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomplete by MRoblesDev</title>

    <style type="text/css">
        ul {
            list-style-type: none;
            width: 300px;
            height: auto;
            position: absolute;
            margin-top: 10px;
            margin-left: 10px;
        }

        li {
            background-color: #EEEEEE;
            border-top: 1px solid #9e9e9e;
            padding: 5px;
            width: 100%;
            float: left;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h3>Autocomplete</h3>

    <form action="" method="post" autocomplete="off">
        <div>
            <label for="campo">Buscar:</label>
            <input type="text" name="campo" id="campo">

            <ul id="lista"></ul>
        </div>
    </form>

    <script src="js/peticiones.js"></script>
</body>

</html>

Archivo .env para los datos de acceso de la database. Se puede crear un directoro inc para su inclusion:
database.env

<?php

class Database
{
    private $hostname = "localhost";
    private $database = "database";
    private $username = "user";
    private $password = "password";
    private $charset = "utf8";

    /**
     * Se conecta a la base de datos y devuelve un objeto PDO. (PHP Data Objects) 
     * 
     * @return La conexión a la base de datos.
     */
    function conectar()
    {
        try {
            $conexion = "mysql:host=" . $this->hostname . ";dbname=" . $this->database . ";charset=" . $this->charset;
            $options = [
                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                PDO::ATTR_EMULATE_PREPARES => false,
            ];

            $pdo = new PDO($conexion, $this->username, $this->password, $options);

            return $pdo;
        } catch (PDOException $e) {
            echo 'Error conexion: ' . $e->getMessage();
            exit;
        }
    }
}

El archivo de funciones de codigo de php:

<?php

require 'database.php';

$con = new Database();
$pdo = $con->conectar();

$campo = $_POST["campo"];

$sql = "SELECT cp, asentamiento FROM codigos_postales WHERE cp LIKE ? OR asentamiento LIKE ? ORDER BY cp ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->execute([$campo . '%', $campo . '%']);

$html = "";

while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
    $html .= "<li onclick=\"mostrar('" . $row["cp"] . "')\">" . $row["cp"] . " - " . $row["asentamiento"] . "</li>";
}

echo json_encode($html, JSON_UNESCAPED_UNICODE);

Archivo de sql para inyectar en la base de datos para hacer las pruebas:

Pongo el enolace, ya que es muy extenso:

Database SQl Archive

Artículos Relacionados