En este artículo vamos a explicar como crear un input de tipo text desde el cual aparezcan sugerencias y se pueda autocompletar su valor. Este post viene a complementar el anterior sobre cómo crear un cuadro de búsqueda al estilo de google.
Comenzaremos ingresando estas tres etiquetas html con sus respectivos id y clases
<p class="hidden-tips-text"></p>
<input type="text" id="busqueda" />
<div id="resultado"></div>
Hoja de estilo css
<style>
p.hidden-tips-text {
display: none;
}
li:hover {
background-color: grey;
width: 20%;
color: white;
}
input{
width: 25%;
height: 18px;
color: green;
}
</style>
Jquery, Jquery UI y Script
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var consulta;
//hacemos focus al campo de búsqueda
$("#busqueda").focus();
//comprobamos si se pulsa una tecla
$("#busqueda").keyup(function(e){
//obtenemos el texto introducido en el campo de búsqueda
consulta = $("#busqueda").val();
//hace la búsqueda
$.ajax({
type: "POST",
url: "buscar.php",
data: "b="+consulta,
dataType: "html",
beforeSend: function(){
//imagen de carga
$("#resultado").html("<img src='cargando.gif' />");
},
error: function(){
alert("error petición ajax");
},
success: function(data){
$("#resultado").empty();
$("#resultado").append(data);
//seleccionamos de la lista
var lista = $('div#resultado');
lista.bind("mousedown", function (e) {
e.metaKey = false;
}).selectable({
stop: function () {
var result = $("input#busqueda");
var fakeText = $('p.hidden-tips-text').empty();
$(".ui-selected", this).each(function () {
var index = $(this).text();
fakeText.append((index) + "");
});
result.val(fakeText.text());
}
});
}
});
});
});
</script>
En este archivo conectamos con mysql y es el encargado de realizar la búsqueda del lado del servidor
<?php
$buscar = $_POST['b'];
if(!empty($buscar)) {
buscar($buscar);
}
function buscar($b) {
$con = mysql_connect('localhost','root', '');
mysql_select_db('paises', $con);
$sql = mysql_query("SELECT * FROM tabla WHERE pais LIKE '%$b%'
OR id LIKE '%$b%' LIMIT 5", $con);
$contar = @mysql_num_rows($sql);
if($contar == 0){
echo "No se han encontrado resultados para '<b>".$b."</b>'.";
}else{
while($row=mysql_fetch_array($sql)){
$id = $row['id'];
$pais = $row['pais'];
echo "<li class='common-list'>".$id." - ".$pais."</li>";
}
}
}
?>
Queda disponible esta demostración con un listado de países y sus prefijos telefónicos para llamadas internacionales
• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Usar PDO para conectarse a MYSQL
• Cómo detectar el navegador usando JavaScript
• Cómo desarmar un notebook HP Compaq Presario C700
• Proyecto Intranet: Ordenes de servicio y ventas
• Michelles Jaque
• Beatriz Cabrera Zapata
• Mini Poesías - Constanza Gonzales
• Sobre las decisiones - Constanza Gonzales
• Enviar correos usando un formulario desde sitio web o localhost con PHPMailer
• Cómo crear un cuadro de búsqueda al estilo Google
• Sistema de LogIn con verificación de email y recuperación de contraseña usando PHP
• Demostración Jquery UI Selectable usando php y bases de datos mysql
• Subir, insertar, actualizar, borrar imágenes con PHP y MySQL
• Calculadora IMC usando JavaScript
• Select Dependientes con Ajax MySQL PHP
• Expresiones regulares en PHP
• Cómo convertir datos MySQL en formato JSON en PHP
• Visualizar datos en una tabla html con mysqli
• Siembras: Aplicación en Laravel 5.5