hola albeolo y montes28, estuve indagando porque tambien tuve que implementar lo que uds buscan y he dado con una solucion para llenar el combobox con una tabla de base de datos...
por si aun no han conseguido hacerlo les dejo la solucion tomando el tema en una pagina que uds publicaron "http://jqueryui.com/demos/autocomplete/#combobox":
en donde esta el select
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
este select debes llenarlo con la tabla, yo lo realize de esta manera con jquery:
el codigo php para traer los datos de mi base de datos:
<?
require("php/global.php");//este es mi conexion a la bd
include_once("php/CPManipulacion.php");//clase para traer los datos
$result = $gCDB->RetornarCursorAbierto("SELECT * FROM pasajeros where id_cliente='1713'");//sentencia de query
//creo los option del select y coloco los datos de mi tabla
$opciones ="<option value='-1' selected='selected'>Escoja lo Pax</option>";
while($campos=$gCDB->TraerRegistro($result)){
$texto =$campos["nombre"];
$valor =$campos["id_pax"];
$opciones.="<option value=\"$valor\">".utf8_encode($texto)."</option>";
}
?>
y el html del select es:
<select id="combobox">
<? echo $opciones; ?>
</select>
el codigo completo:
<?
require("php/global.php");
include_once("php/CPManipulacion.php");
$result = $gCDB->RetornarCursorAbierto("SELECT * FROM pasajeros where id_cliente='1713'");
$opciones ="<option value='-1' selected='selected'>Escoja lo Pax</option>";
while($campos=$gCDB->TraerRegistro($result)){
$texto =$campos["nombre"];
$valor =$campos["id_pax"];
$opciones.="<option value=\"$valor\">".utf8_encode($texto)."</option>";
}
?>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Combobox</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src="jquery-1.4.4.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.button.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="demos.css">
<style>
.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; }
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
</style>
<script>
(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> </button>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.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;
}
// 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() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label>Your preferred programming language: </label>
<select id="combobox">
<? echo $opciones; ?>
</select>
</div>
<button id="toggle">Show underlying select</button>
</div><!-- End demo -->
</body>
</html>
Este tema le ha gustado a 1 personas