Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Autocompletar el cuadro de texto en CodeIgniter usando jQuery UI

El cuadro de texto Autocompletar ayuda a los usuarios a encontrar y seleccionar el valor de la lista de valores rellenados previamente. Proporciona sugerencias mientras el usuario escribe en el campo de entrada. Generalmente, el cuadro de texto de autocompletado se usa para el campo de entrada de búsqueda donde el usuario permite ingresar los datos almacenados previamente. Con jQuery UI, puede implementar fácilmente un cuadro de texto autocompletado en el sitio web. El complemento jQuery UI Autocompletar es una forma instantánea de agregar la función Autocompletar al campo de texto de entrada. Este complemento convierte los campos de entrada en un autocompletado que recibe información del usuario. Al escribir en el campo autocompletar, este complemento comienza a buscar valores que coincidan y los enumera para elegir.
En la aplicación web, el cuadro de texto de autocompletado llena las sugerencias de la base de datos y permite que el usuario seleccione. Al igual que PHP, puede agregar fácilmente jQuery UI autocompletar en CodeIgniter con la base de datos MySQL. En este tutorial, le mostraremos cómo agregar una función de autocompletar al cuadro de texto en CodeIgniter usando jQuery UI.
El código de ejemplo mostrará la funcionalidad de autocompletar agregando el cuadro de texto de búsqueda de autocompletar de habilidades en CodeIgniter.

Crear tabla de base de datos

Para almacenar los datos de habilidades necesita crear una tabla en la base de datos. El siguiente SQL crea una skillstabla con algunos campos básicos en la base de datos MySQL.
CREATE  TABLE ` habilidades ` (
  `id`  int ( 11 ) NOT NULL AUTO_INCREMENT,
  ` skill`  varchar ( 255 ) compilar utf8_unicode_ci NO NULO ,
  'Estado` enum ( '1' , '0' ) Intercalar utf8_unicode_ci NOT NULL DEFAULT '1' ,
  CLAVE PRIMARIA ( `id` )
) MOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;

Controlador (Skills.php)

El controlador Habilidades tiene 3 funciones, __construct()index(), y autocompleteData().
  • __construir () : carga el modelo de habilidad para recuperar los datos de habilidades de la base de datos.
  • índice () : carga la vista para mostrar el campo de entrada de búsqueda de habilidades.
  • autocompleteData () -
    • Obtuve los datos de habilidades de la base de datos en función del término de búsqueda.
    • Generar una matriz con id y elemento de valor.
    • Devuelve los datos de habilidades como una matriz codificada JSON.
<? php defined ( 'BASEPATH' ) O exit ( 'No se permite el acceso directo al script' ); 

Habilidades de  clase  extiende el  controlador_CIN { 
    función  __construct () { 
        parent :: __construct (); 
        // Cargar modelo de habilidad 
        $ esto -> cargar -> modelo ( 'habilidad' ); 
    } 
    
índice de     función pública  () { 
        // Cargar la vista 
        $ this -> load -> view ( 'skills / index' ); 
    } 
    
    función autocompleteData () { 
        $ returnData  = array (); 
        
        // Obtener datos de habilidades 
        $ condiciones [ 'searchTerm' ] =  $ this -> input -> get ( 'term' ); 
        $ conditions [ 'conditions' ] [ 'status' ] =  '1' ; 
        $ skillData  $ this -> skill -> getRows ( $ conditions ); 
        
        // Generar matriz 
        si (! Vacío ( $ skillData )) { 
            foreach ( $ skillData  como  $ row ) {
                $ data [ 'id' ] =  $ row [ 'id' ]; 
                $ datos [ 'valor' ] =  $ fila [ 'habilidad' ]; 
                array_push ( $ returnData $ data ); 
            } 
        } 
        
        // Devuelve los resultados como matriz codificada json 
        echo  json_encode ( $ returnData ); 
    } 
}

Modelo (Skill.php)

La getRows()función del modelo de habilidad, obtiene los datos de la skillstabla según las condiciones y devuelve los datos como una matriz.
<? php  if (! defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); 

class  Skill  extiende  CI_Model { 
    function  __construct () { 
        $ this -> dbTbl  'skills' ; 
    } 
    
    / * 
     * Obtén filas de la tabla de habilidades 
     * / 
    function  getRows ( $ params  = array ()) { 
        $ this -> db -> select ( "*" ); 
        $ esto -> db -> desde( $ esto -> dbTbl ); 
        
        // obtener datos por condiciones 
        si ( array_key_exists ( "conditions" , $ params )) { 
            foreach ( $ params [ 'conditions' ] as  $ key  =>  $ value ) { 
                $ this -> db -> where ( $ key , $ valor ); 
            } 
        } 
        
        // buscar por términos 
        si (! vacío ( $ params [ 'searchTerm' ])) { 
            $ this -> db -> like( 'skill' $ params [ 'searchTerm' ]); 
        } 
        
        $ this -> db -> order_by ( 'skill' 'asc' ); 
        
        if ( array_key_exists ( "id" , $ params )) { 
            $ this -> db -> where ( 'id' , $ params [ 'id' ]); 
            $ consulta  $ esto -> db -> get (); 
            $ resultado  $ consulta ->row_array (); 
        } else { 
            $ query  $ this -> db -> get (); 
            $ resultado  = ( $ consulta -> num_rows ()>  0 )? $ consulta -> result_array (): FALSE ; 
        } 

        // devolver los datos recuperados 
        devolver  $ resultado ; 
    } 
}

Ver (skills / index.php)

Se requiere la interfaz de usuario de jQuery para habilitar la función de autocompletar. Incluya primero la biblioteca jQuery y jQuery UI.
< link  rel = "hoja de estilo"  href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" >

< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script >
< script  src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" > </ script >
Especifique el ID de elemento donde desea habilitar la función autocompletar. Además, debe definir una fuente local o remota para obtener los datos de las sugerencias automáticas. Dado que el autocompleteData()método del controlador de habilidades recupera los datos de autocompletado, la URL correspondiente debe especificarse en la opción fuente de la función autocompletar ().
< script >
 $ ( function () {
     $ ( "#skill_input" ) .autocomplete ({
        fuente: "<? php echo base_url ('skills / autocompleteData');?>" ,
    });
});
</ script >
Inicialmente, se proporciona un cuadro de texto de entrada para ingresar la habilidad. Cuando el usuario comienza a escribir en el cuadro de texto, las habilidades se recuperarán de la base de datos según el término de búsqueda y las sugerencias se enumeran en el cuadro de texto. Al seleccionar la habilidad de la lista de sugerencias, el valor de la habilidad respectiva se establecerá en el texto de entrada archivado.
< div  class = "auto-widget" >
    < p > Sus habilidades: < input  type = "text"  id = "skill_input" /> </ p >
</ div >

Reemplazar el valor de entrada con ID

De forma predeterminada, después del envío del formulario, el valor del elemento se enviará como un valor de campo de entrada de autocompletado. Pero, la mayoría de los casos, la identificación del elemento seleccionado debe enviarse en el formulario. Usando el selectevento, puede reemplazar el valor del campo de entrada con el ID del artículo.
$ ( function () {
     $ ( "#skill_input" ) .autocomplete ({
        fuente: "<? php echo base_url ('skills / autocompleteData');?>" ,
         seleccione : function (event, ui) {
             event .preventDefault ();
            $ ( "#skill_input" ) .val (ui.item. id );
        }
    });
});

Opciones de configuración del widget de autocompletar

jQuery UI Autocompletar plugin ofrece varias opciones para personalizar la funcionalidad de autocompletar el complemento. Algunas opciones de configuración útiles se dan a continuación. 
fuente - Requerido. La fuente debe especificarse desde donde se buscarán los datos para sugerencias. Puede especificar la fuente local o remota.
  • Fuente local: una matriz se puede utilizar para datos locales. [ "Choice1", "Choice2" ]O[ { label: "Choice1", value: "value1" }, { label: "Choice2", value: "value2" }, ... ]
    $ (" .selector ") .autocomplete ({
        fuente: [ "PHP" , "Python" , "Ruby" , "JavaScript" , "MySQL" , "Oracle" ]
    });
    
  • Fuente remota: la URL se puede usar para una fuente remota que devolverá datos JSON. http://codexworld.com
    $ (" .selector ") .autocomplete ({
        fuente: "http://codexworld.com"
    });
    
minLength - Opcional (Predeterminado 1). El número mínimo de caracteres que deben escribirse antes de realizar la búsqueda.
$ (" .selector ") .autocomplete ({
    longitud mínima: 5
});
select (event, ui) - Se activa cuando se selecciona un valor de las sugerencias.
$ (" .selector ") .autocomplete ({
     select : function (event, ui) {}
});

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas