Header Ads Widget

Ticker

6/recent/ticker-posts

Autocompletar cuadro de texto en CodeIgniter 4 con jQuery UI

La lista de sugerencias de visualización de autocompletado de la interfaz de usuario de jQuery se basa en la entrada en el cuadro de texto.

Puede mostrar sugerencias con y sin AJAX.

En este tutorial, muestro cómo puede agregar jQuery UI autocompletar y cargar datos de base de datos MySQL usando jQuery AJAX en el proyecto CodeIgniter 4.


1. Configuración de la base de datos

  • Abra el .envarchivo que está disponible en la raíz del proyecto.

NOTA - Si el punto (.) No se agregó al principio, cambie el nombre del archivo a .env.

  • Elimine # del inicio de database.default.hostname, database.default.database, database.default.username, database.default.password y database.default.DBDriver.
  • Actualice la configuración y guárdela.
database.default.hostname = 127.0.0.1
database.default.database = testdb
database.default.username = root
database.default.password =
database.default.DBDriver = MySQLi

2. Habilite CSRF

  • Nuevamente abra el .envarchivo.
  • Retire # desde el inicio de la app.CSRFProtectionapp.CSRFTokenNameapp.CSRFCookieNameapp.CSRFExpire, y app.CSRFRegenerate.
  • Actualizo el app.CSRFTokenNamevalor con 'csrf_hash_name'Con este nombre lee el hash CSRF. Puede actualizarlo con cualquier otro valor.
  • Si no desea volver a generar el hash CSRF después de cada solicitud AJAX, configure app.CSRFRegenerate = false.
app.CSRFProtection = verdadero
app.CSRFTokenName = 'csrf_hash_name'
app.CSRFCookieName = 'csrf_cookie_name'
app.CSRFExpire = 7200
app.CSRFRegenerate = verdadero
# app.CSRFExcludeURIs = []
  • Abrir app/Config/Filters.phparchivo.
  • En Descomentar 'csrf'en 'before'caso comentado.
// Siempre se aplica antes de cada solicitud
public $ globals = [
'antes' => [
//'tarro de miel'
'csrf',
],
'después' => [
'barra de herramientas',
//'tarro de miel'
],
];

3. Crear tabla

  • Cree una nueva tabla usersmediante la migración.
php spark migrate: crear create_users_table
  • Ahora, navegue a la app/Database/Migrations/carpeta desde la raíz del proyecto.
  • Busque un archivo PHP que termine en create_users_tabley ábralo.
  • Defina la estructura de la tabla en el up()método.
  • Usando el down()método delete userstable que llama al deshacer la migración.
<? php espacio de nombres App \ Database \ Migrations;

use CodeIgniter \ Database \ Migration;

class CreateUsersTable extiende la migración
{
función pública arriba () {
$ this-> forge-> addField ([
'id' => [
'type' => 'INT',
'restricción' => 5,
'unsigned' => verdadero,
'auto_increment' => verdadero,
],
'nombre' => [
'type' => 'VARCHAR',
'restricción' => '100',
],
'email' => [
'type' => 'VARCHAR',
'restricción' => '100',
],
'ciudad' => [
'type' => 'VARCHAR',
'restricción' => '100',
],
]);
$ this-> forge-> addKey ('id', verdadero);
$ this-> forge-> createTable ('usuarios');
}

// ------------------------------------------------ --------------------

función pública abajo () {
$ this-> forge-> dropTable ('usuarios');
}
}
  • Ejecute la migración -
php spark migrate

4. Descarga jQuery UI

  • Descargue el complemento jQuery UI desde aquí .
  • Extraerlo en la public/carpeta de la raíz.
  • También puede usar CDN -
<! - Script ->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<! - jQuery UI ->
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>

5. Modelo

  • Crear  Users.php archivo en  app/Models/ carpeta.
  • Abre el archivo.
  • Especificar nombre de la tabla  "users" de  $table variables, clave primaria  "id" en  $primaryKey, Tipo de retorno  "array" en  $returnType.
  • En  $allowedFields Array, especifique los nombres de campo,  ['name','email','city'] que se pueden configurar durante la inserción y la actualización.

Código completo

<? php
Espacio de nombres App \ Models;
use CodeIgniter \ Model;

class Users amplía Model {
protegido $ tabla = 'usuarios';
protegido $ primaryKey = 'id';
protegido $ returnType = 'matriz';
protected $ allowedFields = ['nombre', 'correo electrónico', 'ciudad'];
protegido $ useTimestamps = false;
protected $ validationRules = [];
protegido $ validationMessages = [];
protegido $ skipValidation = false;
}

6. Ruta

  • Abrir app/Config/Routes.phparchivo.
  • Definir 2 rutas -
    • /
    • users / getUsers: se utiliza para cargar datos de autocompletar.

Código completo

$ rutas-> get ('/', 'UsersController :: index');
$ rutas-> publicación ('usuarios / getUsers', 'UsersController :: getUsers');

7. Controlador

  • Crear  UsersController.php archivo en  app/Controllers/ carpeta.
  • Abre el archivo.
  • Users Modelo de importación  .
  • Crea 2 métodos -
    • index () -index Vista de carga .
    • getUsers (): este método se usa para manejar solicitudes AJAX de autocompletar UI de jQuery.

Leer los valores POST y asignarlos a la $postData variable. Cree una  $response matriz para almacenar la respuesta de devolución. Asignar un nuevo token CSRF a  $response['token'].

Si searches post a continuación, asignar $postData['search']$searcha buscar los registros de la userstabla en la que searchexiste en el namecampo.

Realice un bucle en los registros recuperados e inicialice $dataArray con las teclas valuelabelAsignar $user['id']'value'tecla y $user['name']'label'tecla.

Asignar $datamatriz a $response['data'].

Devuelve $responseArray en formato JSON.

Código completo

<? php espacio de nombres App \ Controllers;

use Aplicación \ Modelos \ Usuarios;

class UsersController extiende BaseController {

índice de función pública () {
vista de retorno ('índice');
}

getUsers de la función pública () {

$ solicitud = servicio ('solicitud');
$ postData = $ solicitud-> getPost ();

$ respuesta = matriz ();

// Leer nuevo token y asignar en $ respuesta ['token']
$ respuesta ['token'] = csrf_hash ();
$ datos = matriz ();

if (isset ($ postData ['buscar'])) {

$ búsqueda = $ postData ['búsqueda'];

// Obtener registro
$ usuarios = nuevos usuarios ();
$ lista de usuarios = $ usuarios-> seleccionar ('id, nombre')
-> like ('nombre', $ búsqueda)
-> orderBy ('nombre')
-> buscartodos (5);
foreach ($ lista de usuarios como $ usuario) {
$ datos [] = matriz (
"valor" => $ usuario ['id'],
"etiqueta" => $ usuario ['nombre'],
);
}
}

$ respuesta ['datos'] = $ datos;

return $ esto-> respuesta-> setJSON ($ respuesta);

}
}

8. Ver

Crear  index.php archivo en formato  app/Views/.

Cree un elemento oculto para almacenar el nombre del token CSRF especificado en el  .env archivo en el  name atributo y almacene el hash CSRF en el  value atributo.

<input type = "hidden" class = "txt_csrfname" name = "<? = csrf_token ()?>" value = "<? = csrf_hash ()?>" />

Crea 2 elementos de texto. El primer elemento de texto se usa para inicializar el autocompletado y el segundo elemento se usa para almacenar el valor del elemento de sugerencia seleccionado.

Texto -

Inicializar autocompletar activado #autocompleteuser.

Con 'source'opción de carga de datos.

Lea el nombre del token CSRF y el hash del campo oculto y asígnelo a  csrfName y  csrfHash.

Enviar solicitud AJAX para "<?=site_url('users/getUsers')?>"type: "post"dataType: 'json'.

Pase el valor escrito y el token CSRF como datos.

En caso de devolución de llamada exitosa, actualice el valor del token CSRF $('.txt_csrfname').val(data.token).

Pasar data.dataa la response()función.

Con el 'select'evento, obtenga la etiqueta de sugerencia seleccionada y el valor.

Pase  ui.item.label en  #autocompleteuser selector y  ui.item.value en  #userid selector.

Código completo

<! doctype html>
<html>
<cabeza>
<title> Autocompletar cuadro de texto en CodeIgniter 4 con jQuery UI </title>

<! - jQuery UI CSS ->
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<! - <link rel = "stylesheet" type = "text / css" href = "/ jquery-ui / jquery-ui.min.css"> ->

<! - jQuery ->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<! - jQuery UI JS ->
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
<! - <script type = "text / javascript" src = "/ jquery-ui / jquery-ui.min.js"> </script> ->
</head>
<cuerpo>

<! - Token CSRF ->
<input type = "hidden" class = "txt_csrfname" name = "<? = csrf_token ()?>" value = "<? = csrf_hash ()?>" />
<! - Autocompletar ->
Usuario de búsqueda: <input type = "text" id = "autocompleteuser">

<br> <br>
ID de usuario seleccionado: <input type = "text" id = "userid" value = '0'>

<! - Script ->
<tipo de secuencia de comandos = 'texto / javascript'>
$ (documento) .ready (function () {
// Inicializar
$ ("#autocompleteuser") .autocomplete ({

fuente: función (solicitud, respuesta) {

// CSRF Hash
var csrfName = $ ('. txt_csrfname'). attr ('nombre'); // Nombre del token CSRF
var csrfHash = $ ('. txt_csrfname'). val (); // Hash CSRF

// Obtener datos
$ .ajax ({
url: "<? = site_url ('users / getUsers')?>",
tipo: 'publicación',
dataType: "json",
datos: {
búsqueda: request.term,
[csrfName]: csrfHash // Token CSRF
},
éxito: función (datos) {
// Actualizar el token CSRF
$ ('. txt_csrfname'). val (data.token);

respuesta (data.data);
}
});
},
seleccionar: función (evento, ui) {
// Establecer selección
$ ('# autocompleteuser'). val (ui.item.label); // mostrar el texto seleccionado
$ ('# ID de usuario'). val (ui.item.value); // guardar la identificación seleccionada para ingresar
falso retorno;
},
focus: function (evento, ui) {
$ ("#autocompleteuser") .val (ui.item.label);
$ ("#userid") .val (ui.item.value);
falso retorno;
},
});
});
</script>
</body>
</html>

9. Ejecutar y demostración

  • Navegue al proyecto usando el símbolo del sistema si está en Windows o terminal si está en Mac o Linux, y
  • Ejecute el comando "php spark serve".
servicio de chispa php
  • Ejecutar  http://localhost:8080 en el navegador web.

Ver demostración


10. Conclusión

Los datos de autocompletar devueltos por el controlador deben tener las claves de 'valor' y 'etiqueta'. Ajuste el LÍMITE según sus necesidades.

NOTA: si el token CSRF no está habilitado en su proyecto, elimine el código del token CSRF del controlador y visualícelo.

Publicar un comentario

0 Comentarios