Autocompletar campo de texto con jQuery, Ajax y PHP

Como nos dice el título, hoy vamos a explicar a detalle como autocompletar un campo de texto con valores de la base de datos, mientras el usuario va digitando algún dato, en este caso se buscará el término ingresado y listará las coincidencias. Luego al seleccionarla mostrará su id en un campo oculto (tipo hidden) para posterior uso.

Autocompletar campo de texto con jQuery, Ajax y PHP

Bueno, comencemos, diseñando el formulario a utilizar en este ejemplo sencillo, pero muy útil.

Creación de Formulario

<div class=”miform”>
<form enctype=”multipart/form-data”>

<p style=”font-size:25px;”>Búsqueda</p>

<input class=”form-control” type=”hidden” name=”id” id=”id” value=””><!–campo que recibirá el id–>

<input class=”form-control” type=”text” name=”nombre” id=”nombre” placeholder=”Usuario” onkeyup=”autocompletar()” autocomplete=”off”><!–Campo de busqueda–>

<ul id=”lista”></ul>
</form>
</div>

Explicación del código anterior:

Del formulario anterior hay que tener en cuenta el id de los input pues de ellos dependerá el éxito del ejemplo en marcha. El id del input text será en donde digitemos el termino a buscar y el input hidden, ahi se depositará el id del nombre seleccionado.

Creación de archivo .js:

Ahora debemos de crear un archivo .js y debe quedar con dos funciones importantes llamadas “autocompletar” y “set_item” de la siguiente forma:

function autocompletar() {
var min_length = 0; // variable length
var nombre = $(‘#nombre’).val();//obtener el nombre y/o termino de busqeuda
if (nombre.length >= min_length) {
$.ajax({
url: ‘controlador/proceso_busqueda.php’,
type: ‘POST’,
data: {nombre:nombre},
success:function(data){
$(‘#lista’).show();//mistrar la lista
$(‘#lista’).html(data);//mostrar resultado de consulta en la lista
}
});
} else {
$(‘#lista’).hide();
}
}

// funcion que setea valores a los input despues de busqueda
function set_item(id,item) {
// setear valor al imput id y nombre
$(‘#nombre’).val(item);
$(‘#id’).val(id);

// ocultar la lista
$(‘#lista’).hide();
}

Explicación de archivo js:

En el script mencionado anteriormente, se esta esperando a que se escriba algo en la caja de texto para luego procesarlo y por ende mostrar las sugerencia.

Se usa jQuery con la ayuda de la función onkeyup, adicionalmente de usa la función autocompletar(). Asimismo se usa Ajax y se envía los datos a proceso_busqueda.php el cual hace la consulta a la base de datos y devuelve las sugerencias.

Creación de archivo proceso_busqueda.php

El archivo proceso_busqueda.php debe quedar de la siguiente forma:

<?php
include_once(“../modelo/line_conect.php”);//incluye la conexion
include_once(“../modelo/producto.php”);//incluye modelo producto
$nombre = $_POST[‘nombre’];//recibe el nombre a buscar
$objproducto=new producto();
$consulta=$objproducto->get_Productos_Especificos($nombre);

if($consulta){
foreach ($consulta as $rs) {
// se remplaza el termino buscado por el nombre del producto traido de la base de datos (reemplza termino a negrita)
$nombre = str_replace($_POST[‘nombre’], ‘<b>’.$_POST[‘nombre’].'</b>’, $rs[‘nombre’]);
// se agrega una nueva opcion a la lista, se indica id, y nombre
echo ‘<li onclick=”set_item(‘.$rs[id_producto].’,’.”’.str_replace(“‘”, “‘”, $rs[‘nombre’]).”)”>’.$nombre.'</li>’;
}
}else{
echo ‘<li>’.”No hay resultados”.'</li>’;
}

?>

Explicación del archivo busqueda_proceso.php

En la parte anterior incluimos el archivo que se conecta a la base de datos, incluimos el modelo que tiene la función que devolverá un arreglo con los datos consultados y seguidamente mostraremos los datos en una lista ordenada (“Todo ello con el código anterior”).

Bueno hasta ha sido una buena explicación y espero que este ejemplo les sea de mucha ayuda.

Así se ve el formulario terminado.

Autocompletar campo de texto con jQuery, Ajax y PHP

Les dejo el código fuente y la base de datos:

Descargar Codigo
¿Necesitas hosting de calidad y económico? prueba y juzga tu mismo a banahosting
Les dejamos este artículo que habla de banahosting: click aquí
Si quieres obviar el articulo puedes conocer banahosting aquí ya.
Ir al Mejor Hosting BANAHOSTING.COM

No se olviden de compartir y seguirnos en las redes sociales.

Buen día, Saludos!

Actualizado el 11 septiembre, 2016 a las 11:26 am

CITA EN APA

IZAMORAR (2016). Autocompletar campo de texto con jQuery, Ajax y PHP. Recuperado de https://izamorar.com/autocompletar-campo-de-texto-con-jquery-ajax-y-php/



Dejamos tu comentario y ayúdanos a mejorar



Buscador de artículos

Te invitamos a revisar

Como saber qué carrera estudiar
Como elaborar un Currículum Vitae
Antivirus grátis para tu pc
¿Por qué es importante la cultura general?
Vídeo de motivación “El Circo de la Mariposa”