How to use HTML5 datalist for Select/dropdown widget ?

[Mandar Vaze]

My application has select/option  dropdown - which contains lots of entries (one has about 200 entries, other about 3000 - yes three thousand)
I was wondering if there is a way to use HTML5 datalist widget to make the selection user friendly.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

My other option is to use select2 (http://ivaynberg.github.io/select2/) but I prefer to use "native" HTML5 datalist - instead of relying on 3rd party JS library as far as possible.

Currently my "select" is getting created due to "reference" or "list:reference" (multiselect) field types defined in model

-Mandar

[Niphlod]

you'd have to code your own widget, that is not that difficult.
That being said, it's a taddle bit foolish wanting to inject 3k options in a page: datalist is "cool" over the standard "select", but it doesn't cut the weight of the markup.
I'd go with select2 and items loaded via ajax, so you can use the backend's capability to search though the items, and the page will be faster to load.
BTW, the autocomplete widget included in web2py seems a pretty clear winner in this usecase, if you don't want to fiddle with select2.

[Mandar Vaze / मंदार वझे]

 

BTW, the autocomplete widget included in web2py seems a pretty clear winner in this usecase, if you don't want to fiddle with select2.

I looked thru http://web2py.com/books/default/chapter/29/11/jquery-and-ajax#Auto-completion

Is there a way to integrate this with SQLFORM.grid (I need auto-complete only for one of the field) ?

Or should I not use SQLFORM.grid at all - and create the form(s) (new/edit/view) myself ?

-Mandar