Rellenar las opciones de un select jquery ui combobox con tabla de base de datos

[albeolo]

Hola amigos:

Necesitaría rellenar las opciones de un select jquery ui combobox con los registros de una tabla de base de datos mysql que cumplan con los 4 primeros caracteres (por ejemplo) que se tecleen en el select, no con toda la tabla, pues son muchísimos registros y el usuario se aburriría de esperar...

Tengo implementado un autocomplete del tipo combobox de jquery ui en mi web, pero los datos que he conseguido colocar en el select son los que de primeras se codifican junto al select de la página:

index.html

Código:

...
<select id="combobox">
  		<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>
</select>
...

y mi intención es rellenar cuando se haya tecleado el cuarto caracter de busqueda. He visto en otros autocomplete como se haría y me sale en mi tema ok, pero cuando lo cambio a combobox, no funciona:

El código del jquery autocomplete con combobox es:

Código:

	(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: 1,
						// minlength = caracteres minimos que hay que pulsar para empezar la busqueda
						minLength: 4,
						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"
											), "<span style='color: #000000;'>$1</span>" ),
										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 ui-lista-select" );

				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", "Visualizar todo el contenido" )
					.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();
		});
});

Me imagino que en el "source" está la cuestión, habría que implementar la llamada a la base de datos e introducir en los <option> del select los registros que contengan esa sucesión de 4 caracteres (de esta manera no se vuelca la tabla entera); pero he probado y probado y no lo consigo...

Gracias por anticipado.
Si necesitan más código para hacerse a la idea, por favor díganmelo.