Autocompletar usando PHP/MySQL y jQuery
Autocompletar usando PHP/MySQL y jQuery. Este artículo ha sido creado para incorporar un sistema de autocompletar un input, utilizaremos como base PHP/MySQL y jQuery para darle el dinamismo que se desea.
Trabajaremos con una base de datos y su respectiva tabla que contendrá valores que luego buscaremos con este sistema y la palabra en los resultados se mostrará en negrita para dar realce al sistema.
Autocompletar usando PHP/MySQL y jQuery
-
Recursos y lenguajes a usar
-
La estructura del sistema
/css: Contiene nuestros archivos CSS con declaración externa.
/js: Contiene nuestros archivos de JavaScript con declaración externa.
/images: Contiene nuestras imágenes del sistema.
-
La base de datos
Creación de una nueva base de datos con el nombre de «países», ahora importe la secuencia de comandos SQL líneas abajo:
CREATE TABLE IF NOT EXISTS `lista_paises` ( `pais_id` int(11) NOT NULL auto_increment, `pais_nombre` varchar(150) collate utf8_unicode_ci NOT NULL, PRIMARY KEY (`pais_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=45 ; -- -- Volcar la base de datos para la tabla `lista_paises` -- INSERT INTO `lista_paises` (`pais_id`, `pais_nombre`) VALUES (1, 'Bolivia'), (2, 'Colombia'), (3, 'paraguay'), (4, 'japan'), (5, 'brazil'), (6, 'russia'), (7, 'germany'), (8, 'nigeria'), (9, 'united kingdom'), (10, 'france'), (11, 'mexico'), (12, 'south korea'), (13, 'indonesia'), (14, 'philippines'), (15, 'egypt'), (16, 'vietnam'), (17, 'turkey'), (18, 'italy'), (19, 'spain'), (20, 'canada'), (21, 'poland'), (22, 'argentina'), (23, 'colombia');
4. Nuestros archivos
index.php
Este es el archivo principal, se mostrará en la primera vista al cargar la página web:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/sistema.js"></script>
<title>Autocompletar usando PHP/MySQL y jQuery </title>
<style type="text/css">
*{ font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif}
.main{ margin:auto; border:1px solid #7C7A7A; width:40%; text-align:left; padding:30px; background:#85c587}
input[type=submit]{ background:#6ca16e; width:100%;
padding:5px 15px;
background:#ccc;
cursor:pointer;
font-size:16px;
}
input[type=text]{ margin: 5px;
}
</style>
</head>
<body bgcolor="#bed7c0">
<div class="main">
<h1>Autocomplete PHP/MySQL y jQuery </h1>
<br><br>
<form>
<div class="etiqueta">Ingrese paises: </div>
<div class="input_container">
<input autocomplete="off" type="text" id="pais_id" onkeyup="autocompletar()">
<ul id="lista_id"></ul>
</div>
</form>
<br><br>
<div class="footer">
<a href="https://www.baulphp.com/">www.baulphp.com</a>
</div><!-- footer -->
</div>
</body>
</html> Mostrar.php
Este archivo será el motor de nuestro pequeño sistema y está usando Ajax con jQuery en cada momento que ejecutamos nuestro autocompletar este se ejecutara de inmediato, realizara consultas a la base de datos.
Primeramente la conexión con el servidor MySQL
// Utilizaremos conexion PDO PHP
function conexion() {
//Declaramos el servidor, la BD, el usuario Mysql y Contraseña BD.
return new PDO('mysql:host=localhost;dbname=paises', 'root', 'root', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
} Contenido completo de archivo mostrar.php
<?php
// Utilizaremos conexion PDO PHP
function conexion() {
//Declaramos el servidor, la BD, el usuario Mysql y Contraseña BD.
return new PDO('mysql:host=localhost;dbname=paises', 'root', 'root', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
}
$pdo = conexion();
$keyword = '%'.$_POST['palabra'].'%';
$sql = "SELECT * FROM lista_paises WHERE pais_nombre LIKE (:keyword) ORDER BY pais_id ASC LIMIT 0, 7";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$lista = $query->fetchAll();
foreach ($lista as $milista) {
// Colocaremos negrita a los textos
$pais_nombre = str_replace($_POST['palabra'], '<b>'.$_POST['palabra'].'</b>', $milista['pais_nombre']);
// Aquì, agregaremos opciones
echo '<li onclick="set_item(\''.str_replace("'", "\'", $milista['pais_nombre']).'\')">'.$pais_nombre.'</li>';
}
?> sistema.js
El contenido del archivo JavaScript sistema
// Función autocompletar
function autocompletar() {
var minimo_letras = 0; // minimo letras visibles en el autocompletar
var palabra = $('#pais_id').val();
//Contamos el valor del input mediante una condicional
if (palabra.length >= minimo_letras) {
$.ajax({
url: 'mostrar.php',
type: 'POST',
data: {palabra:palabra},
success:function(data){
$('#lista_id').show();
$('#lista_id').html(data);
}
});
} else {
//ocultamos la lista
$('#lista_id').hide();
}
}
// Funcion Mostrar valores
function set_item(opciones) {
// Cambiar el valor del formulario input
$('#pais_id').val(opciones);
// ocultar lista de proposiciones
$('#lista_id').hide();
} style.css
Lo principal para darle estilo a este ejemplo.
* {
margin: 0;
padding: 0;
}
.footer {
padding: 10px;
text-align: right;
}
.footer a {
color: #999999;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
.etiqueta {
width: 120px;
float: left;
line-height: 28px;
font-size: 20px;
}
.input_container {
height: 30px;
float: left;
}
.input_container input {
height: 20px;
width: 200px;
padding: 3px;
border: 1px solid #cccccc;
border-radius: 0;
}
.input_container ul {
width: 206px;
border: 1px solid #eaeaea;
position: absolute;
z-index: 9;
background: #f3f3f3;
list-style: none;
margin-left: 5px;
margin-top: -3px;
}
.input_container ul li {
padding: 2px;
}
.input_container ul li:hover {
background: #eaeaea;
}
#country_list_id {
display: none;
}
Espero que esta breve explicacion les sirva en abundancia.
Muy bueno tu ejemplo !!
Muchas gracias
como puedo colocarle un link o url a cada pais
Tienes que agregar el campo URL a tu tabla de paises de tipo Varchar (200)
al momento de imprimir en donde aparece el nombre del país, tienes que concatenar el campo que acabas de agregar, por ejemplo:
.$milista[‘url’]
a mi me ha funcionado super bien, precisamente lo usé para dar solución algo práctico que requería, un listado de precios con el nombre del producto y el precio, realmente excelente aporte de Nestor, gracias!!!!
hola amigos del php!
Estoy intentando en hacer funcionar este magnifico ejemplo de Nestor. No tengo experiencia en la tecnología Ajax con jQuery. Serian tan amables de indicarme como entra en funcionamiento «mostrar.php» cada vez que se ejecuta autocompletar con unkeyup, en index.php?
Cual es la funcion de jquery.min.js?
Muchisimas gracias a todos
hola amigos del php!
he logrado hacer funcionar este auto completar propuesto por Nestor Tapia, pueden verlo a:
http://213.4.33.41/0-php/automplete3/index.php
Me faltaba poner la libreria jquery.min.js en la cabecera de index.php
Saludos a todos y muchas gracias Nestor
Gracias Nestor, excelente aporte. Estuve haciendo pruebas y funciona muy bien, pero cuando trato de cambiar el nombre del id en el index, en mostrar y en sistema.js deja de funcionar. Agradecería tus comentarios.
Hola Guillermo,
Si se modifica el index.php, tambien se tiene que editar en sistema.js revisando detalladamente todos los campos, por ejemplo:
pais_id cambiar por productos_idCambiar todos los campos que lleva ese nombre, tanto en index.php y/o sistema.js
Ahora, si desea cambiar la tabla de MySQL en mostrar.php se tiene que realizar los cambios
Saludos