El plugin select2 es un plugins de jquery muy famoso, con el cual llevo mas de 2 años trabajando, dicho plugins me es útil para cargar información desde una base de datos en un campo de tipo select.
En un tutorial anterior he explicado como usar un Autocompletado de Múltiples campos Usando jQuery , Ajax , PHP y MySQL puedes verlo en el siguiente enlace:
Autocompletado de Múltiples campos Usando jQuery , Ajax , PHP y MySQL
Normalmente suelo utilizar este tipo de plugins cuando requiero cargar una gran cantidad de datos desde una tabla, tales como: información de productos, clientes, categorías, proveedores, usuarios, etc.
Debido a que no podemos cargar todos los datos a la vez ya que será muy difícil para el usuario de nuestra aplicación web, encontrar el elemento de entre varios registros que desee seleccionar, es posible llamarlos vía AJAX.
Para este ejemplo he creado una pequeña tabla “categories” dentro de una base de datos llamada “test_select2“. A continuacion la estructura de la tabla:
categories.sql
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
-- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Servidor: 127.0.0.1 -- Tiempo de generación: 11-05-2017 a las 05:36:19 -- Versión del servidor: 10.1.19-MariaDB -- Versión de PHP: 7.0.13 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Base de datos: `test_select2` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `categories` -- CREATE TABLE `categories` ( `id` int(11) NOT NULL, `name` varchar(200) NOT NULL, `place` varchar(200) NOT NULL, `descrp` varchar(400) NOT NULL, `date_added` date DEFAULT '0000-00-00' ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Volcado de datos para la tabla `categories` -- INSERT INTO `categories` (`id`, `name`, `place`, `descrp`, `date_added`) VALUES (1, 'Smartphones', '', '', '2017-04-02'), (2, 'Tablets', '', '', '2017-04-02'), (3, 'Monitores', '', '', '2017-04-02'), (4, 'Camaras Digitales', '', '', '2017-04-02'), (5, 'Almacenamiento', '', '', '2017-04-02'); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `categories` -- ALTER TABLE `categories` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `categories` -- ALTER TABLE `categories` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html lang="es"> <head> <title>Autocomplete con Ajax y Select2</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> </head> <body> <div style="width:520px;margin:0px auto;margin-top:30px;height:500px;"> <h2>Autocomplete con Ajax y Select2</h2> <font class=""> Select2 viene con soporte AJAX incorporada, usando métodos AJAX de jQuery. </font> <font>En este ejemplo, podemos buscar dentro de una tabla categorías. </font> <select class="categoryName form-control" style="width:500px" name="categoryName"></select> </div> <script type="text/javascript"> $('.categoryName').select2({ placeholder: 'Selecciona una categoría', ajax: { url: 'ajax.php', dataType: 'json', delay: 250, processResults: function (data) { return { results: data }; }, cache: true } }); </script> </body> </html> |
ajax.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php define ('DB_USER', "root"); define ('DB_PASSWORD', ""); define ('DB_DATABASE', "test_select2"); define ('DB_HOST', "localhost"); $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE); $sql = "SELECT * FROM categories WHERE name LIKE '%".$_GET['q']."%' LIMIT 10"; $result = $mysqli->query($sql); $json = []; while($row = $result->fetch_assoc()){ $json[] = ['id'=>$row['id'], 'text'=>$row['name']]; } echo json_encode($json); |
Bien ahora sólo resta probar el script un tu servidor web.
He creado una entrada para autocompletar datos con solo con JavaScript sin dependencias de jQuery, puedes echarle un vistazo a continuación
Librería de autocompletado desarrollada con Javascript para Bootstrap 5.