Autocomplete en Bootstrap usando PHP – MySQLi – AJAX

En este tutorial, te vamos a mostrar cómo crear un Autocomplete en Bootstrap  usando PHP – MySQLi –  AJAX.  En este ejemplo se presenta una lista de sugerencias de datos cargadas desde una tabla en nuestra base de datos.

Creando nuestra base de datos

El primer paso es crear nuestra base de datos.
1. Abre phpMyAdmin.
2. Haz clic en bases de datos, crea una base de datos y asigna el nombre que desees, para este tutorial nosotros la hemos llamado “test_ajax_search”, pero tu puedes nombrarla como desees .
3. Después de crear una base de datos, haz clic en la pestaña “SQL” y ejecuta el siguiente código:

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Servidor: 127.0.0.1
-- Tiempo de generación: 26-10-2017 a las 07:03:00
-- Versión del servidor: 10.1.19-MariaDB
-- Versión de PHP: 7.0.13

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de datos: `test_ajax_search`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `user`
--

CREATE TABLE `user` (
  `userid` int(11) NOT NULL,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Volcado de datos para la tabla `user`
--

INSERT INTO `user` (`userid`, `firstname`, `lastname`) VALUES
(1, 'Luis', 'Campos'),
(2, 'Manuel', 'Ayala'),
(3, 'Julio', 'Lobo'),
(4, 'Saira', 'Moreno'),
(5, 'Tatiana', 'Gomez'),
(6, 'Dimas', 'Castillo'),
(7, 'Timoteo', 'Duellas');

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`userid`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `user`
--
ALTER TABLE `user`
  MODIFY `userid` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Creando nuestra conexión

 El siguiente paso es crear una conexión a la base de datos y guardarla como “conn.php”. Este archivo servirá como nuestro puente entre nuestro formulario y nuestra base de datos. Para crear el archivo, abre tu editor de código HTML y pega el siguiente código.
<?php
 
//MySQLi Procedural
$conn = mysqli_connect("localhost","root","","test_ajax_search");
if (!$conn) {
	die("Connection failed: " . mysqli_connect_error());
}
 
?>

Creando nuestro formulario de búsqueda

El siguiente paso es crear nuestro formulario de búsqueda. Además, ten en cuenta que los archivos CSS y script que se han utilizado para este tutorial están alojados en un servidor remoto, por lo que es necesario que tengas una conexión a  Internet para que puedas desarrollar este tutorial. Nombraremos al archivo como  “index.php”.

<!DOCTYPE html>
<html>
<head>
	<title>Autocomplete en Bootstrap  usando PHP - MySQLi -  AJAX</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		#result{
			position:absolute;
			top:45px;
			left:175px;
		}
	</style>
</head>
<body>
	<nav class="navbar navbar-default">
    <div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand" href="http://facturacionweb.site/blog/">Facturación Web</a>
		</div>
		
		<div class="collapse navbar-collapse navbar-ex1-collapse">
			<div class="col-sm-3 col-md-3">
			<form class="navbar-form" role="search" method="POST" action="result.php">
			<div class="input-group">
				<input type="text" class="form-control" placeholder="Buscar" name="search" id="search">
				<div class="input-group-btn">
					<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
				</div>
			</div>
			</form>
			</div>
		</div>
    </div>
	</nav>
	<div id="result"></div>
<script type="text/javascript">
$(document).ready(function() {
 
   $("#search").keyup(function() {
		var name = $('#search').val();
		if (name == "") {
			$("#result").html("");
		}
		else {
			$.ajax({
			type: "POST",
			url: "search.php",
			data: {
				search: name
			},
			success: function(html) {
				$("#result").html(html).show();
			}
			});
		}
	});
 });

function fill(Value) {
 
	$('#search').val(Value);
	$('#result').hide();
	
}
</script>
</body>
</html>

Creando nuestro código de búsqueda

A continuación, creamos nuestro código de búsqueda. Este código será el que obtenga los datos de nuestra base de datos. Nombramos este archivo como “search.php”.

<?php

include "conn.php";
if (isset($_POST['search'])) {
	$search = $_POST['search'];
	
	$query=mysqli_query($conn,"select * from `user` where firstname like '%$search%' or lastname like '%$search%'");

	if(mysqli_num_rows($query)==0){
		echo '<div class="panel panel-default" style="width:235px;">';
		?>
		<span style="margin-left:13px;">No se encontraron resultados</span>
		<?php
		'</div>';
	}
	else{
		echo '<div class="panel panel-default" style="width:235px;">';
		while ($row = mysqli_fetch_array($query)) {
		?>
			
			<span>
			<a href="user.php?id=<?php echo $row['userid']; ?>" style="text-decoration:none; color:black; margin-left:13px;"><?php echo $row['firstname']; ?> <?php echo $row['lastname']; ?></a>
			</span><br>
			
		<?php
		}
		'</div>';
	}
}
 
?>
 

Creando nuestra página de resultados

El siguiente paso es crear nuestra página de resultados para nuestro formulario de búsqueda en caso de que el usuario elija ingresar texto de búsqueda. Llamamos esto como “result.php”.

<!DOCTYPE html>
<html>
<head>
	<title>Autocomplete en Bootstrap  usando PHP - MySQLi -  AJAX</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-default">
    <div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand" href="http://facturacionweb.site/blog/">Facturación Web</a>
		</div>
    </div>
	</nav>
	<div class="row" style="margin-left: 50px;">
		Resultados: <ul style="list-style-type:none;">
		<?php
			include('conn.php');
			$search=$_POST['search'];
	
			$query=mysqli_query($conn,"select * from `user` where firstname like '%$search%' or lastname like '%$search%'");
			if (mysqli_num_rows($query)==0){
				echo '<li>No results found!</li>';
			}
			else{
			while($row=mysqli_fetch_array($query)){
				?>	
				<li>
					<a href="user.php?id=<?php echo $row['userid']; ?>" style="margin-left:13px;"><?php echo $row['firstname']; ?> <?php echo $row['lastname']; ?></a>
				</li>
				<?php
			}
			}
		?>
		</ul>
		<br>
		<a href="index.php" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-left"></span> Regresar</a>
	</div>
</body>
</html>

Creando nuestra página de salida

Por último, creamos nuestra página de salida. Esta página mostrará los resultados de nuestras búsquedas. Llamamos esto como “user.php”.

<!DOCTYPE html>
<html>
<head>
	<title>Autocomplete en Bootstrap  usando PHP - MySQLi - AJAX</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-default">
    <div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand" href="http://facturacionweb.site/blog/">Facturación Web</a>
			
		</div>
    </div>
	</nav>
	<div class="row" style="margin-left: 50px;">
		<?php
			include('conn.php');
			$id=$_GET['id'];
			$query=mysqli_query($conn,"select * from `user` where userid='$id'");
			$row=mysqli_fetch_array($query);
			
			echo 'Usuario: <strong>'.$row['firstname'].' '.$row['lastname'].'</strong>';
		?>
		<a href="index.php" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-left"></span> Regresar</a>
	</div>
</body>
</html>

Hasta aquí llega nuestro tutorial. En caso de que tengas problemas con la base de datos, hemos incluido una base de datos de ejemplo en el archivo descargable de este tutorial ubicado en la carpeta ‘db’. Si tienes algún comentario o pregunta, no dudes en comentar a continuación.