Como construir un SELECT Autocomplete con HTML, PHP y JS para nuestras webs y aplicaciones

En algunas ocasiones, mientras programamos una web o especialmente algún tipo de aplicación, nos vemos en la necesidad de incluir algún tipo de formulario en el que el usuario ha de elegir una opción.

Esto se arregla muy facilmente utilizando el típico código del select / option dentro de nuestro form.

<form action="/action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

Así , el usuario, elige una de las opciones propuestas y el formulario nos la devuelve para que hagamos con ella lo que necesitemos. En este caso , la variable $_GET[‘cars’] contendría la opción seleccionada.

Muy sencillo, ¿verdad?

Pero, ¿y si tenemos cientos de opciones?, ¿y si esas cientos de opciones las tenemos en una base de datos?. El tema se complica, no?

Pues bien, os traigo una solución muy práctica que podréis, de manera muy simple, añadir a vuestros formularios. Como siempre os digo que es muy posible que encontréis mejores maneras, pero ésta os servirá y las podréis entender muy facilmente.

Este script está formado por el código HTML junto con el PHP necesario en un mismo archivo, otro archivo qu contendrá los estilos CSS, y un archivo JS que es el que se encarga de realizar buena parte del trabajo. Empecemos con el archivo PHP:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="select.css">
<script src="select.js"></script>
<?php
//-----------RECOGEMOS LA SELECCION-------------------------------------------------------
if(!empty($_GET)){
	echo '<h3 style="text-align:center">Has seleccionado la ciudad<br/>con id:<strong>'. $_GET['ciudad_seleccionada'].'</strong></h3>';
}else{
	echo '<h3 style="text-align:center">Selecciona<br/><strong>Ciudad</strong></h3>';
}
?>
<!--------------------------------------------------------------------->
<form class="comment_form">
	<div style="text-align: center;">
		<select  class="" id="combobox" name="ciudad_seleccionada">
			<option value=""></option>
			<?php
/*
			$server = "localhost";
			$user = "root";
			$password = "password";
			$db = "database";
			$conn = mysqli_connect($server, $user, $password, $db);

          $sql = "SELECT * FROM mibasededatos";
          $consulta = mysqli_query($conn, $sql);
          */

foreach ($consulta as $ciudad) {
	?>
<option value="<?= $ciudad['rank'] ?>"><?= $ciudad['city']." (id: ".$ciudad['rank'] ?>)</option>
<?php
}
?>
</select>
<button style="vertical-align: top;" class="btn" type="submit" >SELECCIONAR</button>
</div>
</form>

Como puedes observar, hemos creado la variable (un array) $consulta tras hacer una consulta a la base de datos. 

En nuestra base de datos tenemos un listado de ciudades con algo de información extra. Vamos a utilizar el campo [‘rank’] y [‘city’] para añadirlos en cada option de nuestro formulario.

Para hacerlo desde vuestra propia base de datos, sólo debéis descomentar los datos de acceso a la base de datos, poner vuestra información y generar la consulta necesaria para crear todas las opciones del formulario.

¿Cómo funciona?

Cada opción nos mostrará el nombre de la ciudad ($ciudad[‘city’]) y, una vez se haya seleccionado una opción, el formulario nos devuelve el id de la ciudad seleccionada ($ciudad[‘rank’]).La variable que recoge esta información es, en este caso, $_GET[‘ciudad_seleccionada’], pero lógicamente puedes modificar tanto el nombre como el método.

Este dato ya podemos guardarlo o gestionarlo como mejor nos vaya.

select.js , el script creador.

	$(function () {
		$.widget("custom.combobox", {
			_create: function () {
				this.wrapper = $("<span>")
				.addClass("custom-combobox select_input")
				.insertAfter(this.element);
				this.element.hide();
				this._createAutocomplete();
				this._createShowAllButton();			},

				_createAutocomplete: function () {
					var selected = this.element.children(":selected"),
					value = selected.val() ? selected.text() : "";

					this.input = $("<input>")
					.appendTo(this.wrapper)
					.val(value)
					.attr("placeholder", " Select CITY")
					.addClass("form-control")
					.autocomplete({
						delay: 0,
						minLength: 3,
						source: $.proxy(this, "_source")
					})
					.tooltip({
						classes: {
							"ui-tooltip": "ui-state-highlight"
						}
					});

					this._on(this.input, {
						autocompleteselect: function (event, ui) {
							ui.item.option.selected = true;
							this._trigger("select", event, {
								item: ui.item.option
							});
						},

						autocompletechange: "_removeIfInvalid"
					});
				},

				_source: function (request, response) {
					var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
					response(this.element.children("option").map(function () {
						var text = $(this).text();
						if (this.value && (!request.term || matcher.test(text)))
							return {
								label: text,
								value: text,
								option: this
							};
						}));
				},

				_removeIfInvalid: function (event, ui) {

                        // Selected an item, nothing to do
                        if (ui.item) {
                        	return;
                        }

                        // Search for a match (case-insensitive)
                        var value = this.input.val(),
                        valueLowerCase = value.toLowerCase(),
                        valid = false;
                        this.element.children("option").each(function () {
                        	if ($(this).text().toLowerCase() === valueLowerCase) {
                        		this.selected = valid = true;
                        		return false;
                        	}
                        });

                        // Found a match, nothing to do
                        if (valid) {
                        	return;
                        }                        
                    },

                    _destroy: function () {
                    	this.wrapper.remove();
                    	this.element.show();
                    }
                });

		$("#combobox").combobox();
		$("#toggle").on("click", function () {
			$("#combobox").toggle();
		});
	});

Éste script es el que se encarga de realizar el trabajo. No voy a entrar mucho pero simplemente echando un vistazo, creo que queda claro lo que hace. Puedes decidir cuántas letras hay que escribir antes de que se muestren las opciones (en este caso 3), cambiar el placeholder, o añadirle clases personalizadas…. tú mismo.

y, finalmente, los estilos del CSS.

Ya sólo queda ajustarlo todo a nuestro gusto. Tamaños, colores, orientaciones… lo que necesites. Verás que hay varias clases creadas desde el archivo select.js que debes personalizar en tu CSS. Supongo que no será un problema para tí.

body{
	background: #000;
	color:#fff;
}
	form{
		margin-top: 20px;
	}
	.custom-combobox {
		position: relative;
		display: inline-block;
	}
	.custom-combobox-toggle {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
	}
	.custom-combobox-input {
		margin: 0;
		padding-top: 2px;
		padding-bottom: 5px;
		padding-right: 5px;
	}
	.ui-helper-hidden-accessible{
		display: none;
	}
	.ui-menu{
		width: 300px;
	}

 

Y para que veas cómo funciona, aqui te lo dejo. Verás que al escribir 3 letras te muestra todas las opciones que contienen esas letra. Cuando seleccionas una y envías el formulario, recibimos el id de esa opción.

 

 

Puedes probar su funcionamiento AQUI.

 

 

Simple y eficiente, como todo lo que intento poner aqui. Espero que te sea de utilidad.

Hasta pronto!!