New question

Question:

Date: 17-02-2015 10:30:16 (In Spanish)

¿Cómo mostrar texto con autocomplete() pero conservando un value diferente?[Resolved]

Uso la función autocomplete() de ui.jquery el problema está en que me toma el valor real que me devuelve el archivo de procesar.
Por ejemplo, hago autocomplete() hacia un php el cuál me regresa la id de la persona a la que busco, pues esa id la uso enseguida. El problema está en que por ejemplo, tecleo "fulanita de" y como le corresponde el id 1, el autocomplete me muestra "1" siendo que quisiera que me mostrar "fulanita de tal" pero que me siguiera guardando el valor de la id pues lo ocupo.

Mi código es este:
$(document).ready(function(){ 	
				$("#persona").autocomplete({
      				source: "../src/buscarPersona.php",
      				minLength: 2
    			});

<input type="text" id="persona">

El archivo que procesa: buscarPersona.php
//la conexión está bien.
$nombre = $_GET['term'];
$consulta = mysql_query("SELECT id, nombre FROM persona WHERE nombre LIKE '%$nombre%'"); //mi consulta es más completa, donde no deja margen de error para la búsqueda, aquí solo es ilustrativo ya que la consulta no es la que está mal.


	if(mysql_num_rows($consulta) > 0){
	while($fila = mysql_fetch_array($consulta)){
		$id_per[] = $fila[0];
			//echo "[{value:$fila[0], label:$fila[1]}]";
		//$id_per = array("value"=>"$fila[0]", "label"=> "fila[1]");
	}
	echo json_encode($id_per);

Ya lo intenté de varias formas pero nomás no xd
Alguno sabe cómo podría resolver esto? (Noten que la que imprime es la de $id_per[] y que solo me muestra el id. Por lo tanto, busco por nombre pero el autocompletar me regresa la id, pues es la que necesito para seguir procesando la información después. Quiero que el autocompletar me setie el nombre de la persona como sugerencia pero me ponga la id como el value del input.

Saludos
Tags: Autocomplete - Javascript - JQuery - Question Votes: 2 - Answers: 3 - Views: 49 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 18-02-2015 08:51:29 Hola Jesús, he realizado un ejemplo completo para que veas como se puede capturar más de un valor con el autocomplete de Jquery UI (en su última versión, ojo con esto, ya que hay plugins/scripts que estan deprecados).

    A continuación te adjunto la página web index.php donde esta el campo predictivo (autocomplete) junto con un campo hidden que resguarda el ID de la persona seleccionada:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Autocomplete ID:NOMBRE</title>
            <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
            <script src="//code.jquery.com/jquery-1.10.2.js"></script>
            <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
            <style>
                .ui-autocomplete-loading {
                    background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
                }
                #persona { width: 25em; }
            </style>
            <script type="text/javascript">
                $(document).ready(function() {
                    $("#persona").autocomplete({
                        source: function(request, response) {
                            $.ajax({
                                url: "buscarPersona.php",
                                dataType: "json",
                                data: {
                                    term: request.term
                                },
                                success: function(data) {
                                    response(data);
                                }
                            });
                        },
                        minLength: 2,
                        select: function(event, ui) {
                            var personaIdNombre = ui.item ? ui.item.label : '';
                            var arrayPersona = personaIdNombre.split(":");
                            $('#persona_id').val(arrayPersona[0]);
                            $('#persona').val(arrayPersona[1]);
                            return false;
                        },
                        open: function() {
                            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                        },
                        close: function() {
                            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                        }
                    }).autocomplete("instance")._renderItem = function(ul, item) {
                        return $("<li>").append("<a>" + item.label.split(":")[1] + "</a>").appendTo(ul);
                    };
                });
            </script>
        </head>
        <body>
            <div class="ui-widget">
                <label for="persona">Su nombre: </label>
                <input type="text" id="persona" />
                <input type="hidden" id="persona_id" />
            </div>
        </body>
    </html>


    Por otro lado, aquí te adjunto el script PHP buscarPersona.php que simula la conexión a una base de datos y devuelve los datos (aquí habrá que hacer el select etc., etc...) pero es importante ver como se confecciona el JSON de respuesta, que es donde esta el truco para retornar más de un valor. Observa como se confecciona el valor de respuesta "ID:NOMBRE" y luego desde Javascript (en el index.php) se hace un split por el separador ":" y se cargan los campos.

    $nombre = (isset($_GET['term'])) ? $_GET['term'] : '';
    
    //datos que normalmente estarían en la base de datos (para el ejemplo funcional los pongo de forma estática).
    $usuarios = array();
    $usuarios[] = array('id' => 1, 'nombre' => 'Fernando Mosquera');
    $usuarios[] = array('id' => 2, 'nombre' => 'Jesús Carrillo');
    $usuarios[] = array('id' => 3, 'nombre' => 'Rasmus Lerdorf');
    
    $id_per = array();
    
    //esta foreach emula la busqueda en la base de datos, y carga el resultado en la variable $id_per
    if (!empty($nombre)) {
        foreach ($usuarios as $usuario) {
            if (stripos($usuario['nombre'], $nombre) !== FALSE) {
                //$id_per[] = $usuario;
                $id_per[] = $usuario['id'].':'.$usuario['nombre'];
            }
        }
    }
    
    echo json_encode($id_per); //devuelvo un json


    Espero que mi respuesta te sea de ayuda.

    Saludos,
    Fernando
      Votes: 3 - Link answer
     
  • Date: 18-02-2015 14:28:54 Hola! Gracias por responder. Lo solucioné técnicamente como me lo pusiste tú, pensé en el split y pues al final terminé usándolo. Lo malo es que en las sugerencias me aparecía el id seguido del nombre, asi:
    "1. Jesús Carrillo", le hacía split con el punto y ya mandaba en un hidden el valor en la posición 0, funcionó todo correctamente, pero no me gusta la idea de mostrar el id al usuario (aunque este no sepa que el número se refiere al id).
    Supongo que tu código ya lo hace mostrándome solo el nombre, así que lo implemento a mi sistema y doy por solucionado el post.

    Muchísimas gracias por tomarte el tiempo para responderlo. Saludos!

    Editanto:
    Touché
    var personaIdNombre = ui.item ? ui.item.label : '';
      Votes: 1 - Link answer
     
  • Date: 15-08-2018 01:42:39 Muchas gracias a ambos, me ha sido muy útil, llevaba horas con esto   Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com