Seguro que conoces al dedillo la búsqueda inmediata de Google, la cual proporciona a los usuarios una interfaz amistosa con la característica del autocompletado. Así pues en este artículo, te mostraremos cómo crear un buscador con autocompletado mediante Bootstrap Typeahead para mejorar la experiencia del usuario mediante la visualización de sugerencias y posibles opciones basadas en el texto que el usuario ingresó en el cuadro de búsqueda, tal y como lleva a cabo la búsqueda instantánea de Google. Para ello, hemos creado un ejemplo de búsqueda con autocompletado mediante PHP, MySQL y el plugin de Twitter Typehead.
Antes que nada, debemos incluir la librería Bootstrap, jQuery los ficheros de Typeahead en la sección head de la página.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
Después, tendremos que crear la vista. Para ello, en HTML creamos un campo input que hará de nuestro campo de búsqueda.
<div class="container"> <h2>Autocomplete Search with Bootstrap Typeahead</h2> <div class="row"> <div class="col-xs-2"> <br/> <label>Search Name</label> <input class="typeahead form-control" type="text" placeholder="Search Name...."> </div> </div> </div>
Ahora desarrollaremos la función de enviar la petición ajax a search_data.php para obtener así, los datos JSON y mostrarlos utilizando Typeahead JS.
$( document ).ready(function() {
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get('search_data.php', { query: query }, function (data) {
data = $.parseJSON(data);
return process(data);
});
},
showHintOnFocus:'all'
});
});
Ahora en nuestro script PHP search_data.php, hacemos la conexión a nuestra base de datos y obteneemos los registros de nuestra tabla employee. Almacenaremos los nombre de los empleados en un array y los devolveremos en formato JSON utilizando la función json_encode. Así nos aseguraremos que Typeahead recibe bien los datos y los muestra en el autocompletador del campo de búsqueda.
<?php
$servername = "localhost";
$username = "root";
$password = "12345";
$dbname = "demos";
$sql = "SELECT employee_name FROM employee WHERE employee_name LIKE '%".$_GET['query']."%' LIMIT 20";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$json = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$json[] = $rows["employee_name"];
}
echo json_encode($json);
?>
Fuente: phpzag.com