Cómo crear un campo input para tags con autocompletador con Bootstrap

Los tags son una estupenda forma de agrupar y organizar el contenido. Por ejemplo, WordPress cuenta con tags que no son ni más ni menos que una taxonomía integrada para agrupar el contenido. En este tutorial veremos cómo agregar tags utilizando el plugin “Bootstrap Tags Input”. Este plugin de jQuery te proporciona una interfaz de usuario que te permite agregar tags mediante un campo input de un formulario.

En este tutorial crearemos un formulario HTML que tendrá un campo input que permitirá al usuario añadir tags. Para ello inicializaremos la librería que hemos comentado antes utilizando el ID del campo que hemos designado para ello. Al ir agregando etiquetas, mostraremos sugerencias con el autocompletador mediante el motor Bloodhound. Parsearemos la información de países almacenados en un fichero JSON y mostraremos la sugerencia en el autocompletador cada vez que el usuario tecleé dentro del campo.

Inicialización de Bootstrap Tags utilizando jQuery

El siguiente código muestra el script de jQuery que utilizaremos para inicializar la librería de “Bootstrap Tags Input”. Usaremos esto para crear un campo input en nuestro formulario para agregar tags. Al inicializar la librería, tendremos que referenciar al ID del campo que queremos que se utilice para este menester.

Para ello, he utilizado “Bootstrap typeahedjs” para que aparezcan las sugerencias en el autocompletador al teclear en el campo. Por supuesto, alimentaremos nuestro autocompletador con un archivo JSON que contiene información sobre distintos países. Con este plugin, podemos añadir tags de nuestro JSON y no solo eso, sino añadir los tags que nosotros queramos sin que ni siquiera aparezcan dentro del fichero.

<input type="text" value="" id="tags-input" data-role="tagsinput" />
<script>
	var countries = new Bloodhound({
	  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
	  queryTokenizer: Bloodhound.tokenizers.whitespace,
	  prefetch: {
		url: 'countries.json',
		filter: function(list) {
		  return $.map(list, function(name) {
			return { name: name }; });
		}
	  }
	});
	countries.initialize();

	$('#tags-input').tagsinput({
	  typeaheadjs: {
		name: 'countries',
		displayKey: 'name',
		valueKey: 'name',
		source: countries.ttAdapter()
	  }
	});
</script>