Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #16748 > unrolled thread

Javascript for HTML select/option form with lots of entries

Back to article view | Back to comp.lang.javascript

Contents

  Javascript for HTML select/option form with lots of entries Alfred Molon <alfred_molon@yahoo.com> - 2012-10-20 14:37 +0200
    Re: Javascript for HTML select/option form with lots of entries Luuk <luuk@invalid.lan> - 2012-10-20 15:09 +0200
      Re: Javascript for HTML select/option form with lots of entries Alfred Molon <alfred_molon@yahoo.com> - 2012-10-20 19:38 +0200
        Re: Javascript for HTML select/option form with lots of entries Danny <dann90038@gmail.com> - 2012-10-20 11:40 -0700
          Re: Javascript for HTML select/option form with lots of entries Alfred Molon <alfred_molon@yahoo.com> - 2012-10-20 21:13 +0200
        Re: Javascript for HTML select/option form with lots of entries Luuk <luuk@invalid.lan> - 2012-10-20 20:47 +0200
          Re: Javascript for HTML select/option form with lots of entries Luuk <luuk@invalid.lan> - 2012-10-20 22:16 +0200
    Re: Javascript for HTML select/option form with lots of entries Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-10-24 02:21 +0100

#16748 — Javascript for HTML select/option form with lots of entries

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

[toc] | [next] | [standalone]

#16749

On 20-10-2012 14:37, Alfred Molon wrote:
> 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?
>

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

[toc] | [prev] | [next] | [standalone]

#16755

In article <9dkal9-c2a.ln1@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.

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).
-- 

Alfred Molon
http://www.molon.de - Photos of Asia, Africa and Europe

[toc] | [prev] | [next] | [standalone]

#16756

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 :)

[toc] | [prev] | [next] | [standalone]

#16758

In article <fa4b2c3f-8ff2-4f39-801f-284e5429635e@googlegroups.com>, 
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.

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.
-- 

Alfred Molon
http://www.molon.de - Photos of Asia, Africa and Europe

[toc] | [prev] | [next] | [standalone]

#16757

On 20-10-2012 19:38, Alfred Molon wrote:
> In article <9dkal9-c2a.ln1@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)
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).
>

its using ajax (or jquery)
look at the code, and make it work for IE should not be so hard.....

[toc] | [prev] | [next] | [standalone]

#16759

On 20-10-2012 20:47, Luuk wrote:
> On 20-10-2012 19:38, Alfred Molon wrote:
>> In article <9dkal9-c2a.ln1@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)
> 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).
>>
>
> its using ajax (or jquery)
> look at the code, and make it work for IE should not be so hard.....

The manualpage for jquery is here:
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.

[toc] | [prev] | [next] | [standalone]

#16827

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:Xns9FB6521286DB8invalidcom@94.75.214.39>

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web