autocomplete <select>

[dcm1987]

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

[perryjr]

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:

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:

$(function() {
  // Cargando cosas:
  $.getJSON('buscarproyectos.php', function(opciones) {
    var items = [];
    // Para cada cosa añado un nuevo elemento a la matriz «items»
    $.each(opciones, function(key, val) {
      var selected = // COMPROBAR SI ES EL ELEMENTO SELECCIONADO
      var attr = selected ? ' selected="selected"' : '';
      items.push('<option value="' + val + '"' + attr + '>' + val + '</option>');
    });
 
    $('<select/>', {
      html: items.join('') // junto todos los elementos de la matriz (sin dejar espacios entre ellos)
    }).appendTo('body'); // añado el <select>...</select> al documento
  });
});
 

Código PHP:

$matriz = array();
  
  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";
      $matriz[] = $value;
      
      // Pequeño truco, para diferenciar el elemento seleccionado, añado un elemento
      // adicional más que me lo indique
      $matriz['selected'] = $value;
    }
    else{
      $matriz[] = $value
      //echo "<option value='$value'>$value";
    }
  }
  mysql_close($link);
 
  json_encode($matriz);
}
 

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.

[dcm1987]

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:

(function( $ ) {
    $.widget( "ui.combobox", {
        _create: function() {
            var self = this,
                select = this.element.hide(),
                selected = select.children( ":selected" ),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $( "<input>" )
                .insertAfter( select )
                .val( value )
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function( request, response ) {
                        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
                        response( select.children( "option" ).map(function() {
                            var text = $( this ).text();
                            if ( this.value && ( !request.term || matcher.test(text) ) )
                                return {
                                    label: text.replace(
                                        new RegExp(
                                            "(?![^&;]+;)(?!<[^<>]*)(" +
                                            $.ui.autocomplete.escapeRegex(request.term) +
                                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                        ), "<strong>$1</strong>" ),
                                    value: text,
                                    option: this
                                };
                        }) );
                    },
                    select: function( event, ui ) {
                        ui.item.option.selected = true;
                        self._trigger( "selected", event, {
                            item: ui.item.option
                        });
                    },
                    change: function( event, ui ) {
                        if ( !ui.item ) {
                            var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                                valid = false;
                            select.children( "option" ).each(function() {
                                if ( $( this ).text().match( matcher ) ) {
                                    this.selected = valid = true;
                                    return false;
                                }
                            });
                            if ( !valid ) {
                                // remove invalid value, as it didn't match anything
                                $( this ).val( "" );
                                select.val( "" );
                                input.data( "autocomplete" ).term = "";
                                return false;
                            }
                        }
                    }
                })
                .addClass( "ui-widget ui-widget-content ui-corner-left" );
                input.data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.label + "</a>" )
                    .appendTo( ul );
            };
                this.button = $( "<button type='button'>&nbsp;</button>" )
                .attr( "tabIndex", -1 )
                .attr( "title", "Ver todos los elementos" )
                .insertAfter( input )
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass( "ui-corner-all" )
                .addClass( "ui-corner-right ui-button-icon" )
                .click(function() {
                    // close if already visible
                    if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
                        input.autocomplete( "close" );
                        return;
                    }
                        // work around a bug (likely same cause as #5265)
                    $( this ).blur();
                        // pass empty string as value to search for, displaying all results
                    input.autocomplete( "search", "" );
                    input.focus();
                });
        },
 
        destroy: function() {
            this.input.remove();
            this.button.remove();
            this.element.show();
            $.Widget.prototype.destroy.call( this );
        }
    });
})( jQuery );
    $(function() {
    $( "#idbuscarproyecto" ).combobox();
});
 

Código HTML:

<select id="idbuscarproyecto" name="idbuscarproyecto">
    <option value="">seleccione un proyecto</option>
        <?php
        require_once "funciones.php";
    proyectos_bd(); 
        ?>
</select>
 

codigo php:

Código PHP:

function proyectos_bd(){
        $link=mysql_connect();
        mysql_select_db();
        $sql="";
        $result=mysql_query($sql,$link);
        while($row=mysql_fetch_assoc($result)){
            $value = $row["pm_number"].", ".$row["pm_title"];
            $id=$row["pm_id"];
            echo "<option value='$id'>$value</option>";
        }
        mysql_close($link);
    }
 

[perryjr]

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=