Selectbox html con opciones de varios renglones

Quizás esto no es muy común, pero quién dice que nunca lo necesitarás (como me pasó a mi). En uno de los desarrollos que tenemos para el ISSSTE necesitaba un select en el que sus opciones pudieran ser de varios renglones debido a que el texto de ellas es demasiado grande (nombres de medicamentos con su respectiva presentación). Traté de hacerlo con estilos en CSS, definiendo el size, tratando de darle estilo a la etiqueta (option), en fin, de varias maneras, y nada.
Recordé que en jquery algunos plugins de autocompletar te generan selects dinámicamente, algunos con div otros con listas así que voltee a ese lado para tratar de hacerlo pero al intentar modificar sus estilos y demás programación no lograba hacer lo que necesitaba. Así llegue a la penosa necesidad de hacerlo de cero :S

Lo primero que hice fue escribir los estilos CSS para lograr un div donde puse mi input text que servirá de buscador y la lista (ul) con los elementos (li) donde estará la información de los medicamentos, así quedó mi hoja de estilos CSS: [css] .mi_select {
background:#FFFFFF;
position:relative;
width:200px;
}
.mi_select #medicamento_1 {
width:200px;
}
.mi_select #med1 {
padding:0;
margin:0;
list-style:none;
border:#999999 1px solid;
display:none;
height:200px;
overflow:auto;
}
.mi_select #med1 li {
text-align:justify;
}
.mi_select #med1 li a {
display:block;
color:#000066;
text-decoration:none;
border-bottom:#CCCCCC solid 1px;
}
.mi_select #med1 li a:hover {
background:#FFFF99;
} [/css] Html: [html] <div class="mi_select">
<input type="text" name="medicamento_1" id="medicamento_1" value="" tabindex="12">
<ul id="med1">
<li><a href="#" id="id_medicamento" title="descripcion_medicamento"><span class="clase_medicamento">descripcion_medicamento</span></a></li>
</ul>
</div> [/html] Dentro de cada (li) tengo un anchor (a) con su identificador (id) con valor del id. del medicamento (esto para saber que medicamento se selecciona), al título del anchor (title) le asigno la descripción del medicamento (este lo utilizaremos en jquery para realizar la búsqueda y mover el scroll al elemento que coincida), y el texto del link que se encuentra dentro de una etiqueta span porque necesitamos asignarle una clase_medicamento dependiendo si hay o no exitencia de dicho medicamento.

Ahora veamos el código jquery: [js] $(function() {
$("#medicamento_1").live("focus", function() {
if (($("#med1").css("display") == "none"))
$("#med1").toggle(200);
if (($("#med1").css("display") != "none") && ($("#medi_1").val() != "")) {
$("#medicamento_1").attr("value", "");
$("#medi_1").attr("value", "");
}
});
$("#medicamento_1").live("keyup", function() {
var valor = $(this).val();
var long = valor.length;
$("#med1 a").each(function(index, element) {
if (valor.toUpperCase() == $(element).attr("title").substr(0,long).toUpperCase()) {
$(this).focus();
$("#medicamento_1").focus();
exit;
}
});
});
$("#med1 a").live("click", function() {
$("#medicamento_1").val($(this).attr("title"));
$("#medi_1").val($(this).attr("id"));
$("#med1").toggle(200);
});
}); [/js] Son 3 simples funciones: cuando el input de búsqueda obtiene el foco (focus), cuando se suelta una tecla en el input de búsqueda (keyup) y cuando se hace click en un anchor de la lista (click). Están con live y no con blend porque la página donde selecciono los medicamentos la cargo mediante ajax y tengo que tener estas funciones en la página que la carga.
Aquí una breve explicación:

Focus: Verifico si se está mostrando mi lista de medicamentos, de no ser la muestro con toggle. El segundo if es para mostrar también la lista en caso de que no esté visible y ya se haya seleccionado algún medicamento, además de mostrarla borro el valor de mi input de búsqueda.
Existe un elemento llamado medi_1 el cual no es más que un simple input oculto (hidden) donde guardo el valor del id. del medicamento.

keyup: Al soltar una tecla dentro de mi input de búsqueda obtengo el valor de este, saco la longitud de este valor. Luego hago un recorrido con each por cada anchor (a) de la lista comparando el valor de mi input de búsqueda con el valor del title (descripción del medicamento) de cada anchor (a), donde encuentro la primer concordancia hago un focus a ese elemento de la lista (esto me hace el scroll), regreso el foco a mi input de búsqueda y rompo el ciclo (exit)

click: Al hacer click sobre alguna de las opciones de la lista se asigna el valor del title (descripción del medicamento) al input de búsqueda, se asigna a nuestro campo oculto el valor del id. del medicamento y se cierra con toggle la lista

Quizás les parezca algo engorroso este método pero fué el único con el que pude lograr mi objetivo, tener selects con opciones de 2 o más renglones, les dejo una imagen para que lo vean

Saludos