Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Javascript for HTML select/option form with lots of entries
30 views
Skip to first unread message
Alfred Molon
Oct 20, 2012, 8:37:42 AM10/20/12
to
I have an HTML select/option form with about 400 entries (10-digit
customs codes) and it's a bit tiring to scroll up and down to find the
right customs code.
I was wondering if there is some Javascript which would facilitate the
selection of the right entry.
For instance initially all 400 entries are displayed as selectable
options.
Then you type a "3" and all entries starting with 3 are displayed as a
scrollable list from which you can choose one entry.
Then suppose you type a "7" and all entries starting with "37" are
displayed. You can select one of the entries or type another digit,
let's say "5" and further reduce the number of entries displayed to
those starting with "375" and so on. Is there Javascript like that
around?
--
Alfred Molon
http://www.molon.de - Photos of Asia, Africa and Europe
customs codes) and it's a bit tiring to scroll up and down to find the
right customs code.
I was wondering if there is some Javascript which would facilitate the
selection of the right entry.
For instance initially all 400 entries are displayed as selectable
options.
Then you type a "3" and all entries starting with 3 are displayed as a
scrollable list from which you can choose one entry.
Then suppose you type a "7" and all entries starting with "37" are
displayed. You can select one of the entries or type another digit,
let's say "5" and further reduce the number of entries displayed to
those starting with "375" and so on. Is there Javascript like that
around?
--
Alfred Molon
http://www.molon.de - Photos of Asia, Africa and Europe
Luuk
Oct 20, 2012, 9:09:35 AM10/20/12
to
Alfred Molon
Oct 20, 2012, 1:38:23 PM10/20/12
to
In article <9dkal9-...@luuk.invalid.lan>, Luuk says...
with IE9).
The behaviour is a bit different from what I described above. If you
type for instance a '5', it shows all entries which contain a 5, not
just those which start with a 5.
Is there anything which runs on all browsers?
If at least the above code defaulted to the standard HTML select/option
thing on browsers who do not support this HTML5 element, but no, on IE9
it shows all options of the list as text (not selectable).
> Google says:
> http://www.raymondcamden.com/index.cfm/2012/6/14/Example-of-a-dynamic-HTML5-datalist-control
>
> or, to try this:
> http://raymondcamden.com/demos/2012/jun/14/test2.html
Very cool and runs on my FF browser. But does not run under IE (I tried
> http://www.raymondcamden.com/index.cfm/2012/6/14/Example-of-a-dynamic-HTML5-datalist-control
>
> or, to try this:
> http://raymondcamden.com/demos/2012/jun/14/test2.html
with IE9).
The behaviour is a bit different from what I described above. If you
type for instance a '5', it shows all entries which contain a 5, not
just those which start with a 5.
Is there anything which runs on all browsers?
If at least the above code defaulted to the standard HTML select/option
thing on browsers who do not support this HTML5 element, but no, on IE9
it shows all options of the list as text (not selectable).
Danny
Oct 20, 2012, 2:40:01 PM10/20/12
to
Alfred, can you show us the page or a mock up or screenshot of it?
By the way, the <datalist> solution works, and yes, you're right in Firefox it shows all that 'have' the number, not just the ones the begin with it, but that seems to be a Firefox implementation, in Opera it shows 'only' the ones that start with it.
Anyhow, the first thing that I thought when thinking of a <select> with 400 options is, poor categorizing design, rather than not enough options. Thus by looking at the page and context, we can see that you can just add a bit more design, to make it simpler for the user and also less cluttered :)
By the way, the <datalist> solution works, and yes, you're right in Firefox it shows all that 'have' the number, not just the ones the begin with it, but that seems to be a Firefox implementation, in Opera it shows 'only' the ones that start with it.
Anyhow, the first thing that I thought when thinking of a <select> with 400 options is, poor categorizing design, rather than not enough options. Thus by looking at the page and context, we can see that you can just add a bit more design, to make it simpler for the user and also less cluttered :)
Luuk
Oct 20, 2012, 2:47:32 PM10/20/12
to
On 20-10-2012 19:38, Alfred Molon wrote:
> In article <9dkal9-...@luuk.invalid.lan>, Luuk says...
>> Google says:
>> http://www.raymondcamden.com/index.cfm/2012/6/14/Example-of-a-dynamic-HTML5-datalist-control
>>
>> or, to try this:
>> http://raymondcamden.com/demos/2012/jun/14/test2.html
>
> Very cool and runs on my FF browser. But does not run under IE (I tried
> with IE9).
>
> The behaviour is a bit different from what I described above. If you
> type for instance a '5', it shows all entries which contain a 5, not
> just those which start with a 5.
>
if i type 'l' (lowercase L)
> In article <9dkal9-...@luuk.invalid.lan>, Luuk says...
>> Google says:
>> http://www.raymondcamden.com/index.cfm/2012/6/14/Example-of-a-dynamic-HTML5-datalist-control
>>
>> or, to try this:
>> http://raymondcamden.com/demos/2012/jun/14/test2.html
>
> Very cool and runs on my FF browser. But does not run under IE (I tried
> with IE9).
>
> The behaviour is a bit different from what I described above. If you
> type for instance a '5', it shows all entries which contain a 5, not
> just those which start with a 5.
>
i see:
Leaning House
Life is a Horse
so, only thing that start with an 'L'
> Is there anything which runs on all browsers?
>
> If at least the above code defaulted to the standard HTML select/option
> thing on browsers who do not support this HTML5 element, but no, on IE9
> it shows all options of the list as text (not selectable).
>
look at the code, and make it work for IE should not be so hard.....
Alfred Molon
Oct 20, 2012, 3:13:17 PM10/20/12
to
In article <fa4b2c3f-8ff2-4f39...@googlegroups.com>,
Danny says...
customs codes, each with 10 digits (not 400, just had a look again at
the list).
> By the way, the <datalist> solution works, and yes, you're right in
> Firefox it shows all that 'have' the number, not just the ones the
> begin with it, but that seems to be a Firefox implementation, in
> Opera it shows 'only' the ones that start with it.
Ok... but then the solution is not robust yet, or to put it differently
the technology is not that far yet. All browsers should behave in the
same way.
> Anyhow, the first thing that I thought when thinking of a <select>
> with 400 options is, poor categorizing design, rather than not
> enough options. Thus by looking at the page and context, we can see
> that you can just add a bit more design, to make it simpler for the
> user and also less cluttered :)
That's a valid point you are making. But the implementation is not that
easy either.
Suppose the selectable options are the countries of the world. Over 200
countries and territories - how to categorise that? It's either a one
step selection or a two step selection by continent or region first and
by country later. The two step approach is quite complex. Complex coding
if you do it server-side, and again complex coding (I guess) if you do
it browser side.
Danny says...
> Alfred, can you show us the page or a mock up or screenshot of it?
Sorry, it's not online yet. Essentially it's a picklist with over 600
customs codes, each with 10 digits (not 400, just had a look again at
the list).
> By the way, the <datalist> solution works, and yes, you're right in
> Firefox it shows all that 'have' the number, not just the ones the
> begin with it, but that seems to be a Firefox implementation, in
> Opera it shows 'only' the ones that start with it.
the technology is not that far yet. All browsers should behave in the
same way.
> Anyhow, the first thing that I thought when thinking of a <select>
> with 400 options is, poor categorizing design, rather than not
> enough options. Thus by looking at the page and context, we can see
> that you can just add a bit more design, to make it simpler for the
> user and also less cluttered :)
easy either.
Suppose the selectable options are the countries of the world. Over 200
countries and territories - how to categorise that? It's either a one
step selection or a two step selection by continent or region first and
by country later. The two step approach is quite complex. Complex coding
if you do it server-side, and again complex coding (I guess) if you do
it browser side.
Luuk
Oct 20, 2012, 4:16:27 PM10/20/12
to
http://api.jqueryui.com/autocomplete/
with an example that works in IE
i'm pretty sure there is a parameter to limit search on the start of a word.
Thomas 'PointedEars' Lahn
Oct 23, 2012, 9:21:12 PM10/23/12
to
Alfred Molon wrote:
> I have an HTML select/option form with about 400 entries […]
Do not do that.
PointedEars
--
Sometimes, what you learn is wrong. If those wrong ideas are close to the
root of the knowledge tree you build on a particular subject, pruning the
bad branches can sometimes cause the whole tree to collapse.
-- Mike Duffy in cljs, <news:Xns9FB6521286...@94.75.214.39>
> I have an HTML select/option form with about 400 entries […]
Do not do that.
PointedEars
--
Sometimes, what you learn is wrong. If those wrong ideas are close to the
root of the knowledge tree you build on a particular subject, pruning the
bad branches can sometimes cause the whole tree to collapse.
-- Mike Duffy in cljs, <news:Xns9FB6521286...@94.75.214.39>
0 new messages