Foros del Web » Programando para Internet » Javascript » Frameworks JS »

autocomplete <select>

Estas en el tema de autocomplete <select> en el foro de Frameworks JS en Foros del Web. Lo primero de todo, muy buenas tardes a todos. Soy bastante novato en el diseño de paginas web y quisiera que me intentaran ayudar un ...
  #1 (permalink)  
Antiguo 25/07/2011, 06:51
 
Fecha de Ingreso: julio-2011
Mensajes: 12
Antigüedad: 7 años, 7 meses
Puntos: 0
autocomplete <select>

Lo primero de todo, muy buenas tardes a todos.

Soy bastante novato en el diseño de paginas web y quisiera que me intentaran ayudar un poco si no es molestia.

Tengo una tabla en una base de datos rellena con diferentes tipos de proyecto. Cada fila esta compuesta por un id, un numero y un titulo del proyecto.

En el index, tengo un formulario en el que quiero poner un campo <select> para que en la parte de las option value.. se vayan rellenando con los diferentes proyectos de la base de datos.

Yo he hecho esto, pero creo que esta mal...si quieren corregirme por favor, se agradecería.

utilizo para ello el plugin de jquery autocomplete ui.

en el lado del usuario:
<td><select id="buscarproyecto" name="buscarproyecto">
<option value="">seleccione un proyecto</option>
//lo que quiero es que cuando al campo le pongas "a", en el select salga tantos options como proyectos con "a" hayan en la base de datos.
</select>

mi script de autocomplete es asi:
$(function(){
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
}
$("#buscarproyecto").autocomplete({
source: "buscarproyecto.php",
minLength: 1,
select: function(event, ui){
return ui.item.value+"-"+ui.item.id;
log(ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});

y finalmente tengo para realizar la busqueda sobre la base de datos esto:
function proyectos_bd($q){
$link=mysql_connect(...);
mysql_select_db(...);
$sql="SELECT pm_id, pm_title, pm_number FROM egw_pm_projects";
echo "<select name='$q'>";
$result=mysql_query($sql,$link);
while($row=mysql_fetch_assoc($result)){
$value = $row["pm_number"].", ".$row["pm_title"];
if (strpos(strtolower($value), $q) !== false) {
$id=$row["pm_id"];
//echo $id."##".$value."\n";
echo "<option select value='$value'>$value";
}
else{
echo "<option value='$value'>$value";
}
}
mysql_close($link);
}


bueno a ver si sacamos algo.
Muchas gracias
  #2 (permalink)  
Antiguo 25/07/2011, 16:08
Avatar de perryjr  
Fecha de Ingreso: julio-2010
Ubicación: Granada, Spain, Spain
Mensajes: 190
Antigüedad: 8 años, 8 meses
Puntos: 27
Respuesta: autocomplete <select>

Dos cosas muy rápidas: Usa Highlight para poner código en el foro, recibirás una respuesta mas rápida y los demás te lo agradeceran ;) Y Segundo, cierra las etiquetas <option>:

Código PHP:
Ver original
  1. echo "<option select value='$value'>$value</option>";

Corrígeme si me equivoco porque hace mucho que no uso jQuery Autocomplete, pero me da que no se debe usar sobre un select, esa no es su función. La función de un autocomplete es añadir a un <input type="text"/> más funcionalidad. Ej: La página de búsqueda de google, empiezas a teclear y sale sugerencias para autocompletar.

Es decir, el plugin lo que hace es cargar los datos, y luego el usuario empieza a teclear en el input, y le salen opciones entre las que puede elegir (aunque también puede decidir ignorarlas y teclear lo que quiera)

Para lo que pretendes hacer tienes dos opciones:

a) Hacerlo tu mismo
b) Encontrar otro plugin que te lo haga.

La opción a) así muy por encima:
Código Javascript:
Ver original
  1. $(function() {
  2.   // Cargando cosas:
  3.   $.getJSON('buscarproyectos.php', function(opciones) {
  4.     var items = [];
  5.     // Para cada cosa añado un nuevo elemento a la matriz «items»
  6.     $.each(opciones, function(key, val) {
  7.       var selected = // COMPROBAR SI ES EL ELEMENTO SELECCIONADO
  8.       var attr = selected ? ' selected="selected"' : '';
  9.       items.push('<option value="' + val + '"' + attr + '>' + val + '</option>');
  10.     });
  11.  
  12.     $('<select/>', {
  13.       html: items.join('') // junto todos los elementos de la matriz (sin dejar espacios entre ellos)
  14.     }).appendTo('body'); // añado el <select>...</select> al documento
  15.   });
  16. });

Código PHP:
Ver original
  1. $matriz = array();
  2.  
  3.   while($row=mysql_fetch_assoc($result)){  
  4.     $value = $row["pm_number"].", ".$row["pm_title"];
  5.     if (strpos(strtolower($value), $q) !== false) {
  6.       $id=$row["pm_id"];
  7.       //echo $id."##".$value."\n";
  8.       //echo "<option select value='$value'>$value";
  9.       $matriz[] = $value;
  10.      
  11.       // Pequeño truco, para diferenciar el elemento seleccionado, añado un elemento
  12.       // adicional más que me lo indique
  13.       $matriz['selected'] = $value;
  14.     }
  15.     else{
  16.       $matriz[] = $value
  17.       //echo "<option value='$value'>$value";
  18.     }
  19.   }
  20.   mysql_close($link);
  21.  
  22.   json_encode($matriz);
  23. }


Finalmente solo mencionarte que por falta de tiempo, te dejo como ejercicio añadirle a JavaScript el código necesario para comprobar el elemento selected.

Si tienes algún problema no dudes en volver a preguntar para que te ayudemos.
__________________
I (L) Google

Última edición por perryjr; 25/07/2011 a las 16:09 Razón: Se me colaron unas pequeñas BBcodes donde no debían =)
  #3 (permalink)  
Antiguo 26/07/2011, 06:14
 
Fecha de Ingreso: julio-2011
Mensajes: 12
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: autocomplete <select>

muchas gracias por la información en todo, sobre el código y sobre el como manejarme mejor en le foro.
Con respecto al autocomplete, estuve documentandome un poco, y vi un plugin, jquery ui, que en la seccion autocomplete hay una pestaña que pone combobox. es la que he acabado utilizando aqui pongo parte del codigo:

codigo javascript:

Código Javascript:
Ver original
  1. (function( $ ) {
  2.     $.widget( "ui.combobox", {
  3.         _create: function() {
  4.             var self = this,
  5.                 select = this.element.hide(),
  6.                 selected = select.children( ":selected" ),
  7.                 value = selected.val() ? selected.text() : "";
  8.             var input = this.input = $( "<input>" )
  9.                 .insertAfter( select )
  10.                 .val( value )
  11.                 .autocomplete({
  12.                     delay: 0,
  13.                     minLength: 0,
  14.                     source: function( request, response ) {
  15.                         var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
  16.                         response( select.children( "option" ).map(function() {
  17.                             var text = $( this ).text();
  18.                             if ( this.value && ( !request.term || matcher.test(text) ) )
  19.                                 return {
  20.                                     label: text.replace(
  21.                                         new RegExp(
  22.                                             "(?![^&;]+;)(?!<[^<>]*)(" +
  23.                                             $.ui.autocomplete.escapeRegex(request.term) +
  24.                                             ")(?![^<>]*>)(?![^&;]+;)", "gi"
  25.                                         ), "<strong>$1</strong>" ),
  26.                                     value: text,
  27.                                     option: this
  28.                                 };
  29.                         }) );
  30.                     },
  31.                     select: function( event, ui ) {
  32.                         ui.item.option.selected = true;
  33.                         self._trigger( "selected", event, {
  34.                             item: ui.item.option
  35.                         });
  36.                     },
  37.                     change: function( event, ui ) {
  38.                         if ( !ui.item ) {
  39.                             var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
  40.                                 valid = false;
  41.                             select.children( "option" ).each(function() {
  42.                                 if ( $( this ).text().match( matcher ) ) {
  43.                                     this.selected = valid = true;
  44.                                     return false;
  45.                                 }
  46.                             });
  47.                             if ( !valid ) {
  48.                                 // remove invalid value, as it didn't match anything
  49.                                 $( this ).val( "" );
  50.                                 select.val( "" );
  51.                                 input.data( "autocomplete" ).term = "";
  52.                                 return false;
  53.                             }
  54.                         }
  55.                     }
  56.                 })
  57.                 .addClass( "ui-widget ui-widget-content ui-corner-left" );
  58.                 input.data( "autocomplete" )._renderItem = function( ul, item ) {
  59.                 return $( "<li></li>" )
  60.                     .data( "item.autocomplete", item )
  61.                     .append( "<a>" + item.label + "</a>" )
  62.                     .appendTo( ul );
  63.             };
  64.                 this.button = $( "<button type='button'>&nbsp;</button>" )
  65.                 .attr( "tabIndex", -1 )
  66.                 .attr( "title", "Ver todos los elementos" )
  67.                 .insertAfter( input )
  68.                 .button({
  69.                     icons: {
  70.                         primary: "ui-icon-triangle-1-s"
  71.                     },
  72.                     text: false
  73.                 })
  74.                 .removeClass( "ui-corner-all" )
  75.                 .addClass( "ui-corner-right ui-button-icon" )
  76.                 .click(function() {
  77.                     // close if already visible
  78.                     if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
  79.                         input.autocomplete( "close" );
  80.                         return;
  81.                     }
  82.                         // work around a bug (likely same cause as #5265)
  83.                     $( this ).blur();
  84.                         // pass empty string as value to search for, displaying all results
  85.                     input.autocomplete( "search", "" );
  86.                     input.focus();
  87.                 });
  88.         },
  89.  
  90.         destroy: function() {
  91.             this.input.remove();
  92.             this.button.remove();
  93.             this.element.show();
  94.             $.Widget.prototype.destroy.call( this );
  95.         }
  96.     });
  97. })( jQuery );
  98.     $(function() {
  99.     $( "#idbuscarproyecto" ).combobox();
  100. });
Código HTML:
Ver original
  1. <select id="idbuscarproyecto" name="idbuscarproyecto">
  2.     <option value="">seleccione un proyecto</option>
  3.         <?php
  4.        require_once "funciones.php";
  5.     proyectos_bd();
  6.        ?>


codigo php:

Código PHP:
Ver original
  1. function proyectos_bd(){
  2.         $link=mysql_connect();
  3.         mysql_select_db();
  4.         $sql="";
  5.         $result=mysql_query($sql,$link);
  6.         while($row=mysql_fetch_assoc($result)){
  7.             $value = $row["pm_number"].", ".$row["pm_title"];
  8.             $id=$row["pm_id"];
  9.             echo "<option value='$id'>$value</option>";
  10.         }
  11.         mysql_close($link);
  12.     }
  #4 (permalink)  
Antiguo 26/07/2011, 11:45
Avatar de perryjr  
Fecha de Ingreso: julio-2010
Ubicación: Granada, Spain, Spain
Mensajes: 190
Antigüedad: 8 años, 8 meses
Puntos: 27
Respuesta: autocomplete <select>

Tienes razón, yo estaba mirando otro complemento distinto =)

A ver, tienes que comprender, que este script lo que hace es recojer todas las opciones del select (que ya estan de antes en la página), y hacer un input-select (una mezcla entre los dos). NO carga nada por AJAX, simplemente digamos que le añade funcionalidad a tu <select> original, que lo oculta y crea un pseudo-input-select que te he mencionado antes.

Coge la demo tal cual aparte, mira que te funcione bien, y ve añadiendo / quitando cosas hasta obtener lo que deseas (y jugando con ella para comprenderla bien, claro=
__________________
I (L) Google

Etiquetas: php, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:48.