Caja de texto con función autocompletar y varios valores utilizando jQuery, PHP y MySQL

En este tutorial te mostraremos cómo implementar una caja de texto con función autocompletar en la que se puedan seleccionar múltiples valores mediante PHP. Para ello, utilizaremos jQuery UI Autocomplete para mostrar las sugerencias de la base de datos MySQL y así los usuarios podrán seleccionar de entre ellos, varios valores.

Junto a la función autocompletar, explicaremos cómo restringir la selección de múltiples valores y obtener valores de varias fuentes distintas.

Librerías jQuery y jQuery UI

Antes que nada, debes incluir la hoja de estilo de jQuery UI, la librería jQuery y la librería jQuery UI.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

jQuery UI Autocomplete con múltiples valores

En este ejemplo, vamos a mostrar una caja de texto para la introducción de habilidades. Una vez que el usuario comience a escribir habilidades, se enumerarán varias sugerencias en el propio cuadro de texto. Estas habilidades auto sugeridas se obtendrán de la tabla skills de la base de datos en el fichero skills.php, el cual devolverá la información en formato JSON.

Javascript

El selector (#skills) de la función autocompletar debe coincidir con el ID del cuadro de texto. También se debe proporcionar la fuente de la información en la opción source.

<script>
$(function() {
    function split( val ) {
        return val.split( /,s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }
    
    $( "#skills" ).bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 1,
        source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            $.getJSON("skills.php", { term : extractLast( request.term )},response);
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
        select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
        }
    });
});
</script>

HTML

El ID de la caja de texto debe coincidir con el selector de la función autocompletar.

<label for="skills">Tag your skills: </label>
<input id="skills" size="50">

Límite en múltiples valores con jQuery UI Autocomplete

Vamos a añadir una restricción en las selecciones múltiples. Si el usuario excede el límite de la selección, los valores extra se eliminarán de la caja de texto.

Para añadir dicha limitación, coloca el siguiente Javascript en el evento select. Para este ejemplo añadiremos un límite de 3, el cual puedes cambiar en base a tus necesidades.

select: function( event, ui ) {
    var terms = split( this.value );
    if(terms.length <= 3) {
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }else{
        var last = terms.pop();
        $(this).val(this.value.substr(0, this.value.length - last.length - 2)); // removes text from input
        $(this).effect("highlight", {}, 1000);
        $(this).attr("style","border: solid 1px red;");
        return false;
    }
}

jQuery UI Autocomplete con múltiples valores de distintas fuentes

En este ejemplo veremos cómo mostrar una caja de texto con función de autocompletar que beba de varias fuentes. La sugerencia del grado se mostrará cuando el usuario realice la primera selección de valores, y las habilidades, en la segunda selección de valores.

Inserta el siguiente Javascript en la opción source. Aquí podrás ver como el primer autocompletar recibe tanto de la fuente degree.php, y el segundo autocompletar bebe de la fuente skills.php

source: function( request, response ) {
    var terms = split( request.term );
    if (terms.length < 2) {
      $.getJSON("degrees.php", { term : extractLast( request.term )},response);
    }else{
       $.getJSON("skills.php", { term : extractLast( request.term )},response);
    }
}

Archivos fuente

Puedes obtener el valor de la caja de texto mediante la variable term ($_GET['term']) en la cadena de la consulta. Buscaremos los datos de la tabla skills o degrees en base a lo que recibamos en term. Los datos que coincidan los devolveremos en formato JSON.

skills.php

<?php
    //database configuration
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '';
    $dbName = 'programacionnet';
    
    //connect with the database
    $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
    
    //get search term
    $searchTerm = $_GET['term'];
    
    //get matched data from skills table
    $query = $db->query("SELECT * FROM skills WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['name'];
    }
    
    //return json data
    echo json_encode($data);
?>

degrees.php

<?php
    //database configuration
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '';
    $dbName = 'codexworld';
    
    //connect with the database
    $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
    
    //get search term
    $searchTerm = $_GET['term'];
    
    //get matched data from skills table
    $query = $db->query("SELECT * FROM degrees WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC");
    while ($row = $query->fetch_assoc()) {
        $data[] = $row['name'];
    }
    
    //return json data
    echo json_encode($data);
?>

Fuente: codexworld.com