autocomplete

echo_ · #1 (**permalink**) 25/02/2012, 00:18

buenas noches de nuevo, tengo un auto complete el cual se inserta en mi base de datos por el valor nombre pero como puedo lograr que no se inserte el nombre, sino que se inserte el id pero sin dejar que el autocomplete deje de mostrame las palabras
saludos

rigobcastro · #2 (**permalink**) 25/02/2012, 02:21

Seria excelente idea que mostrarás que código tienes para poderte ayudar, ya que no sabemos que tecnología estás usando. (jQuery, jQuery UI.. etc...).

echo_ · #3 (**permalink**) 25/02/2012, 02:26

es JS este es mi codigo, es un text


<?php
session_start();
ob_start();
require_once "config.php";

?>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

<script type="text/javascript">
$().ready(function() {
$("#nombre").autocomplete("autocomplete_inst.php ", {
width: 260,
matchContains: true,
//mustMatch: true,
//minChars: 0,
//multiple: true,
//highlight: false,
//multipleSeparator: ",",
selectFirst: false
});
});
</script>
</head>
<body>
<div id="content">
<form autocomplete="off">
<p>
Nombre de la institucion:<br>
<input type="text" name="institucion" id="nombre" onchange="upperCase()" style="text-transform: uppercase;"/>

</p>

</div>
</body>

rigobcastro · #4 (**permalink**) 26/02/2012, 00:24

Bueno analice rapidamente y mire los docs de ese plugin y no encontre callbacks para poder crear los datos a enviar. En cuestión de usabilidad y flexibilidad, te recomiendo el autocomplete de jQueryUI. http://jqueryui.com/demos/autocomplete/

En una de sus opciones, puedes crear un callback para usar los datos retornados a tu antojo. Puedes usar JSON para retornar tanto el nombre como el ID que necesitas, y proseguido a esto alojar el ID en un input tipo"hidden" y el nombre en el input de autocompletar como está normalmente.

Algo de codigo para esto. Con la opción "select" puedes hacer un callback para cuando los datos lleguen desde el source.

Código HTML:

$( "#nombre" ).autocomplete( {
    // Funcion que ejecuta el llamado de datos via JSON
    source: function( request, response ) {
        $.ajax({
            url: "url del source",
            dataType: "JSON",
            // Datos que se enviaran
            data: {
                nombre: request.term // Nombre que se inserta en el autocomplete
            },
            // Funcion cuando retornen los datos
            success: function( data ) {
                response( $.map( data, function( item ) {
                    return {
                        // Nombres que se mostrará en el desplegable
                        label: item.nombre,
                        // ID retornados y necesitados
                        value: item.ID
                    }
                }));
            }
        });
    },
    // Funcion que se ejecuta cuando se hace click en el menu desplegable con los resultados
    select: function( event, ui ) {
        // Cuando hace click en alguno de los nombres del desplegable, que se actualice el ID en el input hidden
        return $("#inputID").val(ui.item.ID);       
    }
});

Y pues en el body tendrás un input hidden con el ID "#inputID"

Código HTML:

<input id="inputID" type="hidden" />

Esto se me ocurre y así como algo fácil. Si tienes experiencia en JSON y jQuery, todo te quedará mucho más fácil. Al principio se ve algo muy tedioso, pero la API de jQueryUI es muy amplia y flexible, útil para hacer callbacks a nuestro antojo.

Lee la documentación completa y detalla los ejemplos, pero recuerda estas dos opciones que te indique para hacer el trabajo de parsear los datos como necesitas.

Saludos!