ricardosiri68/.env.sample

## .env.sample
[database]
user=
pass=
host=
name=

## app.js
(function($){
    var main = function(){
        $('#autocomplete').autocomplete({
            url: '/usuarios.php?q=',
            success: function(data){
                var i, usuario, item, avatar, nombre;
                var list =  $('#autocomplete_list');
                var input = $('#autocomplete');

                input.addClass('autocomplete--input__completing');
                list.removeClass('autocomplete--list__disabled');
                list.html('');

                for(i=0; i<data.length; i++){
                    usuario = data[i];
                    item = document.createElement('li');
                    item.classList.add('autocomplete--list-item');

                    nombre = document.createElement('a');
                    nombre.classList.add('user');
                    nombre.innerText = usuario.nombre;

                    avatar = document.createElement('span');
                    avatar.classList.add('thumb');
                    avatar.style.backgroundImage = 'url(/' + usuario.avatar + ')';

                    item.appendChild(avatar);
                    item.appendChild(nombre);

                    list.append(item);
                }
            }
        });
    };
    window.addEventListener('load', main, false);
}(jQuery));

## autocomplete.css
.autocomplete{
    display: inline-block;
}

.autocomplete--input{
    width: 280px;
    font-size: 14px;
    padding: 3px;
    border: 1px solid #444;
    border-radius: 4px;
}

.autocomplete--input:focus{
    outline:none;
}

.autocomplete--input__completing{
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.autocomplete--list{
    list-style: none;
    padding: 5px;
    margin: 0;
    border: solid #444;
    border-width: 0 1px 1px 1px;
    border-radius: 0 0 4px 4px;
}

.autocomplete--list__disabled{
    display: none;
}

.autocomplete--list-item{
    height: 50px;
}

.autocomplete--list-item > .thumb{
    float: left;
    height: 48px;
    width: 48px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.autocomplete--list-item > .user {
    float: left;
    line-height: 50px;
    padding-left: 10px;
}

## autocomplete.js
(function($){
    $.fn.autocomplete = function(config){

        var id_sto = null;

        var init = function(that){

            that.on('keydown', keypress_complete);

        };

        var keypress_complete = function(e){

            if (id_sto) {
                clearTimeout(id_sto);
            }

            id_sto = setTimeout(
                function(){
                    $.getJSON(
                        config.url + e.target.value,
                        config.success
                    );
                }, 800
            );
        };

        init(this);
        return this;
    };
}(jQuery));

## connection.php
<?php
function get_pdo(){
    $config = parse_ini_file('.env');
    extract($config);
    try {
        return new PDO("mysql:host=$host;dbname=$name", $user, $pass);
    } catch (PDOException $e) {
        echo "Error !! juepueta mira lo que paso ". $e -> getMessage() . "</br>";
    }
}

## index.php
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Autocompletado</title>
        <link rel="stylesheet" type="text/css" href="/autocomplete.css" />
    </head>
    <body>
        <div class="autocomplete">
            <input class="autocomplete--input" id="autocomplete" type="search" placeholder="buscaar ...como loco" />
            <ul class="autocomplete--list autocomplete--list__disabled" id="autocomplete_list"></ul>
        </div>
    </body>
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="/autocomplete.js"></script>
    <script language="javascript" type="text/javascript" src="/app.js"></script>
</html>

## schema.sql
CREATE DATABASE autocompletado_loco
USE autocompletado_loco;

CREATE TABLE users (
  id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(64) NOT NULL,
  avatar VARCHAR(32) NOT NULL DEFAULT 'default.jpg'
);

INSERT INTO users (nombre) VALUES
('Geneva	Hunter'),
('Victoria	Bryant'),
('Genevieve	Lloyd'),
('Neil	Fox'),
('Kerry	Holmes'),
('Cecelia	Greer'),
('Jimmy	Taylor'),
('Inez	Green'),
('William	Lopez'),
('Chester	Carter'),
('Susan	Hines'),
('Pamela	Chandler'),
('Garry	Reid'),
('Kim	Luna'),
('Vicky	Cook'),
('Maureen	Flowers'),
('Melba	Moody'),
('Lynne	Fisher'),
('Pat	Daniels'),
('Vickie	Joseph'),
('Della	Evans'),
('Denise	Herrera'),
('Alfredo	Roberson'),
('Norman	Abbott'),
('Bradley	Porter');

## TODO.md

      
    Raw
  

              TODO.md
            
          
maquetado de la parrilla
creaar el esquema de datos SQL
gestionar la peticion la consulta a PHP
confeccionar el modulo javascript de autocompletado


## usuarios.php
<?php
require_once 'connection.php';

$pdo_cursor = get_pdo();
$termino_nombre = addslashes($_GET['q']);
$query = "SELECT * FROM users WHERE nombre LIKE '%$termino_nombre%'";
$usuarios = $pdo_cursor->query($query);

echo json_encode($usuarios -> fetchAll());
	(function($){
	var main = function(){
	$('#autocomplete').autocomplete({
	url: '/usuarios.php?q=',
	success: function(data){
	var i, usuario, item, avatar, nombre;
	var list = $('#autocomplete_list');
	var input = $('#autocomplete');

	input.addClass('autocomplete--input__completing');
	list.removeClass('autocomplete--list__disabled');
	list.html('');

	for(i=0; i<data.length; i++){
	usuario = data[i];
	item = document.createElement('li');
	item.classList.add('autocomplete--list-item');

	nombre = document.createElement('a');
	nombre.classList.add('user');
	nombre.innerText = usuario.nombre;

	avatar = document.createElement('span');
	avatar.classList.add('thumb');
	avatar.style.backgroundImage = 'url(/' + usuario.avatar + ')';

	item.appendChild(avatar);
	item.appendChild(nombre);

	list.append(item);
	}
	}
	});
	};
	window.addEventListener('load', main, false);
	}(jQuery));
	.autocomplete{
	display: inline-block;
	}

	.autocomplete--input{
	width: 280px;
	font-size: 14px;
	padding: 3px;
	border: 1px solid #444;
	border-radius: 4px;
	}

	.autocomplete--input:focus{
	outline:none;
	}

	.autocomplete--input__completing{
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	}

	.autocomplete--list{
	list-style: none;
	padding: 5px;
	margin: 0;
	border: solid #444;
	border-width: 0 1px 1px 1px;
	border-radius: 0 0 4px 4px;
	}

	.autocomplete--list__disabled{
	display: none;
	}

	.autocomplete--list-item{
	height: 50px;
	}

	.autocomplete--list-item > .thumb{
	float: left;
	height: 48px;
	width: 48px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	}

	.autocomplete--list-item > .user {
	float: left;
	line-height: 50px;
	padding-left: 10px;
	}
	(function($){
	$.fn.autocomplete = function(config){

	var id_sto = null;

	var init = function(that){

	that.on('keydown', keypress_complete);

	};

	var keypress_complete = function(e){

	if (id_sto) {
	clearTimeout(id_sto);
	}

	id_sto = setTimeout(
	function(){
	$.getJSON(
	config.url + e.target.value,
	config.success
	);
	}, 800
	);
	};

	init(this);
	return this;
	};
	}(jQuery));
	<?php
	function get_pdo(){
	$config = parse_ini_file('.env');
	extract($config);
	try {
	return new PDO("mysql:host=$host;dbname=$name", $user, $pass);
	} catch (PDOException $e) {
	echo "Error !! juepueta mira lo que paso ". $e -> getMessage() . "</br>";
	}
	}
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Autocompletado</title>
	<link rel="stylesheet" type="text/css" href="/autocomplete.css" />
	</head>
	<body>
	<div class="autocomplete">
	<input class="autocomplete--input" id="autocomplete" type="search" placeholder="buscaar ...como loco" />
	<ul class="autocomplete--list autocomplete--list__disabled" id="autocomplete_list"></ul>
	</div>
	</body>
	<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
	<script language="javascript" type="text/javascript" src="/autocomplete.js"></script>
	<script language="javascript" type="text/javascript" src="/app.js"></script>
	</html>
	CREATE DATABASE autocompletado_loco
	USE autocompletado_loco;

	CREATE TABLE users (
	id INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
	nombre VARCHAR(64) NOT NULL,
	avatar VARCHAR(32) NOT NULL DEFAULT 'default.jpg'
	);

	INSERT INTO users (nombre) VALUES
	('Geneva Hunter'),
	('Victoria Bryant'),
	('Genevieve Lloyd'),
	('Neil Fox'),
	('Kerry Holmes'),
	('Cecelia Greer'),
	('Jimmy Taylor'),
	('Inez Green'),
	('William Lopez'),
	('Chester Carter'),
	('Susan Hines'),
	('Pamela Chandler'),
	('Garry Reid'),
	('Kim Luna'),
	('Vicky Cook'),
	('Maureen Flowers'),
	('Melba Moody'),
	('Lynne Fisher'),
	('Pat Daniels'),
	('Vickie Joseph'),
	('Della Evans'),
	('Denise Herrera'),
	('Alfredo Roberson'),
	('Norman Abbott'),
	('Bradley Porter');
	<?php
	require_once 'connection.php';

	$pdo_cursor = get_pdo();
	$termino_nombre = addslashes($_GET['q']);
	$query = "SELECT * FROM users WHERE nombre LIKE '%$termino_nombre%'";
	$usuarios = $pdo_cursor->query($query);

	echo json_encode($usuarios -> fetchAll());