Web2py ejemplo sobre selección dinámica y auto-completar.

En este ejemplo vamos a utilizar los ayudantes FORM, SELECT, OPTION etc... donde mostraremos de forma dinámica los meses en un combo-box, también haremos una búsqueda de esos mismo meses a medida que vamos escribiendo.

Más Información: http://www.latinuxpress.com/books/drafts/web2py/caps/capz10.html#auto-completar

default.py.....................................

def index():
    lista = ['Enero' , 'Febrero' , 'Marzo' , 'Abril' , 'Mayo' , 'Junio', 'Julio','Agosto' , 'Septiembre' , 'Octubre' , 'Noviembre' , 'Diciembre']

    form=FORM(LABEL('Selecione un mes: '),SELECT([OPTION(texto, _value=texto) for texto in lista],_name='combo'),BR(),LABEL('Escribir el nombre de un mes:'),INPUT(_name='month',_id='month'))

    return dict(lista=lista,form=form)

def month_selector():

    months = ['Enero' , 'Febrero' , 'Marzo' , 'Abril' , 'Mayo' , 'Junio' , 'Julio' , 'Agosto' , 'Septiembre' , 'Octubre' , 'Noviembre' , 'Diciembre']

    month_start = request.vars.month.capitalize()
    selected = [m for m in months if m.startswith(month_start)]
    return DIV(*[DIV(k,
                                 _onclick="jQuery('#month').val('%s')" % k,
                                 _onmouseover="this.style.backgroundColor='PaleGreen'",
                                 _onmouseout="this.style.backgroundColor='white'",
                                 _onmouseup="jQuery('.suggestions').hide()",
                                 ) for k in selected])

default/index.html.............................
{{extend 'layout.html'}}


<style>
#suggestions { position: relative; }
.suggestions { background: white;  }
.suggestions DIV { padding: 2px 4px 2px 4px; }
</style>

{{=form}}


<div id='suggestions'> </div>

<script>
jQuery("#month").keyup(function(){
      ajax('month_selector', ['month'], 'suggestions')});
</script>