Portada » Lenguaje PHP » Autocompletar usando PHP/MySQL y jQuery

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

Autocompletar PHP MySQL y Jquery
Autocompletar PHP MySQL y Jquery
  1. Recursos y lenguajes a usar

  1. 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.

  1. 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://baulphp.com/">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;
}

 

Autocompletar usando PHPMySQL y jQuery
Autocompletar usando PHP/MySQL y jQuery

Espero que esta breve explicacion les sirva en abundancia.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

7 comentarios en “Autocompletar usando PHP/MySQL y jQuery”

    1. 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!!!!

      1. 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

  1. Guillermo Filippini

    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.

    1. 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_id
      Cambiar 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad