f



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
0
10/20/2012 12:37:42 PM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

7 Replies
617 Views

Similar Articles

[PageSpeed] 28

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


0
luuk (890)
10/20/2012 1:09:35 PM
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
0
10/20/2012 5:38:23 PM
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.  Thu=
s by looking at the page and context, we can see that you can just add a bi=
t more design, to make it simpler for the user and also less cluttered :)
0
dann900381 (80)
10/20/2012 6:40:01 PM
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.....
0
luuk (890)
10/20/2012 6:47:32 PM
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
0
10/20/2012 7:13:17 PM
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.

0
luuk (890)
10/20/2012 8:16:27 PM
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>
0
PointedEars (2489)
10/24/2012 1:21:12 AM
Reply:

Similar Artilces:

When JavaScript is disabled, do not display HTML form and form elements
On my site, I have 2 methods of displaying my data: 1) HTML form with select-option element. (Jump to different page when clicking "Go" button" 2) HTML table with a hyperlink. What I would like to do is the following: If JavaScript is disabled (or non existant on some browsers), to NOT display the HTML form with select-option element. This will help to keep the webpage cleaner for the viewers. PS: I only have access to client-side scripting. Thanks patricksabou...@hotmail.com wrote: > On my site, > > I have 2 methods of displaying my data: > 1) HTML form w...

HTML Forms + Javascript
HI, I need to create an online form with Details such as Name, Address, EMail, Phone, Message, Credit Card Type/Number/Expiry Date. I started this and I was able to create the form and validate it..but the problem is I have two js files :one to validate the normal fields and other one for credit card(Got through internet).So I decided to have two pages :In first apge user will enter the particulars and once they click the continue button they will have to fill out the credit card details.After doing this when they submit I shud get an email with all the details.The main problem/idea I need is...

javascript within a javascript
Hello, I have a multi-frame page. The frames are named Frame_1, Frame_2 and Frame_3. Frame_1 has a drop down box. When a value is selected in this drop down box, Frame_2 is updated using an asp file (as I have to read from a back-end access database). In turn in the asp file, I have a Body onload tag to execute a javascript function within Frame_2. this function updates the contents of Frame_3. Till now this is working fine. Here is the problem. Frame_3 has a form with a radio button. When a radio button is selected, I want that a function be executed in Frame_3. However since conte...

html form in javascript variable
Hi, My problem is: I have javascript variable like this: var variable = "<form name='formABC' method='POST'>"+ "<input type='text' id='nameABC'>"+ ... <form>"; How can I get nameABC and put it into some other variable without reloading a browser? Thanks mirek wrote: > I have javascript variable like this: > > var variable = "<form name='formABC' method='POST'>"+ > "<input type='text' id='nameABC'&...

Javascript menu and HTML forms
Hello, I'm trying to put a menu on a page containing a select form. The code for the menu I took from http://dynamicdrive.com/dynamicindex1/topnavbar.htm and the form is in the code snippet is as follows: <form action="names.html" enctype="multipart/form-data" method="post" name="mainform"> <table xmlns="" cellpadding="5" class="maintable" style="z-index:1;"> <caption></caption> <tr> <td class="control_label;">Nam...

Javascript Clear Select Options Fast
I've often tried to make dynamic, auto-completing drop down lists for managing large numbers of items ( http://www.somacon.com/p39.php ). One of the hurdles is quickly clearing them of options/items. I just figured out a fast way to clear all the items from a drop-down list that solves that part of the problem. You can try it and read about it here: Javascript Clear Select Options Fast http://www.somacon.com/p542.php Any comments welcome. Regards, Shailesh humbads wrote: > I've often tried to make dynamic, auto-completing drop down lists for > managing large numbers of items ...

struts html:form with javascript for ajax
Hi I have a struts (1.1) form <html:form <html:text <html:text ... </html:form> All was well until I wanted to add an ajax field that would do auto- complete. Previously working example had <input id="complete-field" This was incompatible with the html:form tag and so I continued to use <input but when I submit the form the value of the input field is null How can I modify my form so that I can use the javascript functionality ? Thanks eunever32@yahoo.co.uk wrote: > Hi > > I have a struts (1.1) form > > <html:form > > <htm...

Selecting an item in an OPTION group in Javascript?
I get straight to the point... I need to select an item in an option group when a form loads. Its a PHP form which will have a value sent in when the form loads. This value is assigned to a Javascript value in the ONLOAD event. I then need to select an item in a OPTION group which has been poulated from a SQL query. I am guessing somehow you can dynamically set the 'SELECTED' property of the OPTION box for the value I want to select but I don't know the syntax (Im'e not that hot at Javascript!) Any help would be gratefully appreciated.. OK SORRY..... I searched the group ...

select form variable to javascript function.
Hi, i am trying to get a function to work, but i am still learning javascript and i really need some help. i have a select form <select ="menu1" onChange="onMapClick(menu1.value)"> <option selected>Select Dataset</option> <option value="massey_07">Turitea 2007</ option> <option value="Massey_02_2003">Turitea 2003</option> <option value="All_orthos">Turitea</ option> <...

Javascript to OPTIONALLY hide HTML/JS
Hi all: Please excuse a newbie question but I could use some assistance. I have a large number of "help pages" for an application which we provide. Within those pages are sections of code that I want to conditionally comment out. These sections include HTML and Javascript elements. A sample: <p>For more information <script language="javascript">advancedHelp(" <strong>Click Here</strong>","13.htm");</script> to launch the help page. I've tried to define functions optionalHelpStart and optionalHelpEnd which would e...

Javascript to take HTML form data to an XMLPost
I am creating a form that has first name, last name, phone number, etc. and am trying to make the output perform an XMLPost to a remote site. The website that I am developing in uses PHP, so I could use PHP scripting instead, or include a Javascript. Thank you for the help. On 15/08/10 22:48, John Rivers wrote: > I am creating a form that has first name, last name, phone number, > etc. and am trying to make the output perform an XMLPost to a remote > site. The website that I am developing in uses PHP, so I could use PHP > scripting instead, or include a Javascript. >...

how to use javascript functions in struts html:form
hi i have javascripts file validations.js. and i want to use these javascript functions in my jsp pages which use struts html tags.. i don't know how to invoke these functions from <html:form...(struts html tag). if it is a ordinary html form i would have done like below <form name="myform" action="xxxx.jsp" onsubmit="return validate()"> if i wrote the same with the struts html tag.....it is giving error the is no attribute like "name" in html tag lib.. can any body tell me how to user external javascript functions in the struts ht...

General question about javascript V HTML form
Ok, I have another form to write, and one of its features will be pop up or drop down select-from-list stuff. Could be done with javascript, could be done with <SELECT> <OPTION> etc etc.. It will have to have an onselect() anyway, but apart from a better control of appearance, what other pros and cons are there? Coding it up looks a shade simpler in HTML rather than script, but thats all I can see... The Natural Philosopher wrote: > Ok, I have another form to write, and one of its features will be pop up > or drop down select-from-list stuff. > > Could be done ...

how to use javascript functions in struts html:form
hi i have javascripts file validations.js. and i want to use these javascript functions in my jsp pages which use struts html tags.. i don't know how to invoke these functions from <html:form...(struts html tag). if it is a ordinary html form i would have done like below <form name="myform" action="xxxx.jsp" onsubmit="return validate()"> if i wrote the same with the struts html tag.....it is giving error the is no attribute like "name" in html tag lib.. can any body tell me how to user external javascript functions in the struts ht...

how to use javascript functions in struts html:form
hi i have javascripts file validations.js. and i want to use these javascript functions in my jsp pages which use struts html tags.. i don't know how to invoke these functions from <html:form...(struts html tag). if it is a ordinary html form i would have done like below <form name="myform" action="xxxx.jsp" onsubmit="return validate()"> if i wrote the same with the struts html tag.....it is giving error the is no attribute like "name" in html tag lib.. can any body tell me how to user external javascript functions in the struts html tags ...

how to use javascript functions in struts html:form
hi i have javascripts file validations.js. and i want to use these javascript functions in my jsp pages which use struts html tags.. i don't know how to invoke these functions from <html:form...(struts html tag). if it is a ordinary html form i would have done like below <form name="myform" action="xxxx.jsp" onsubmit="return validate()"> if i wrote the same with the struts html tag.....it is giving error the is no attribute like "name" in html tag lib.. can any body tell me how to user external javascript functions in the struts html tags On Tue, 19 Apr 2005 08:19:54 -0700, "Lucky" <jlnarayana@comcast.net> wrote: >hi >i have javascripts file validations.js. and i want to use these javascript >functions in my jsp pages which use struts html tags.. >i don't know how to invoke these functions from <html:form...(struts html >tag). >if it is a ordinary html form i would have done like below ><form name="myform" action="xxxx.jsp" onsubmit="return validate()"> >if i wrote the same with the struts html tag.....it is giving error the is >no attribute like "name" in html tag lib.. >can any body tell me how to user external javascript functions in the struts >html tags > The struts tags have the onSubmit, etc attributes. -- now with more cowbell ...

Using Javascript to select an entry in a drop down box
Hi I have a dropdown box containing about 10 values. I would like to create a separate href on my page that when clicked will make the drop down box go to a specific value. I do not want to have to refresh the page to do this. Is it possible to have that sort of control over a drop down box. ? Andy In article <PokZc.73609$a66.72228@fe2.news.blueyonder.co.uk>, no_email@no_email.com enlightened us with... > Hi > > I have a dropdown box containing about 10 values. > > I would like to create a separate href on my page that when clicked will > make the drop down b...

how to use javascript functions in struts html:form
hi i have javascripts file validations.js. and i want to use these javascript functions in my jsp pages which use struts html tags.. i don't know how to invoke these functions from <html:form...(struts html tag). if it is a ordinary html form i would have done like below <form name="myform" action="xxxx.jsp" onsubmit="return validate()"> if i wrote the same with the struts html tag.....it is giving error the is no attribute like "name" in html tag lib.. can any body tell me how to user external javascript functions in the struts html tags ...

passing a javascript variable into an html form element
let me keep it clean, quick and simple. I am passing a variable into another window and am reassigning the value on the new page - window.document.[formNameA].[varibaleNameA].value = opener.document. ..[formNameB].[varibaleNameB].value and am wanting to then use this value within an element of a form on the current page - <form name="[formNameA]"> <input name="[variableNameA]" type="text"> </form> but cannot seem to get the value passed to actually show up within the input field of the form. any thoughts or suggests? t.i.a. michael ...

Converting Javascript Code to Static HTML in a Form Textarea
http://eastontario.com/promo/html_In_Form.htm ...

javascript load on same html page based on selected data
This is a bit tricky to explain... There is a timeline form where the user select timeline. On the same page there is another form which is used after the timeline has been selected. So when the user chooses timeline and clicks submit the application returns elements from the database to the next form.The system also shows the selected timeline on the same html page (not in the form "form" anymore). We have been using html, jsp and javascript. How do we make this work? On Mar 2, 9:53 am, hanna.huov...@gmail.com wrote: > This is a bit tricky to explain... There is a timeline form...

Newbie needs help with javascript & HTML form
What I am trying to do is have a form with drop down menu selections and a go button. When a user selects a drop down value and clicks the go button, they are redirected to the option value associated with that choice. Here is what I have so far, but it's not working: Any suggestions? <form name="categorychoose" ID="Form1" method="post"> <tr> <td width="12"><img src="images/common/transparent.gif" width="1" height="1"></td> <td width="128" align="left" valign="t...

Passing form elements from/to HTML pages via JavaScript...
Hello, I am trying to get all of my form elements passed correctly from the following URL: http://www.dslextreme.com/users/kevinlyons/selectBoxes.html to the following URL: http://www.dslextreme.com/users/kevinlyons/selectResults.html I am passing name, email, countries, cities, products, courses, etc. The others display as they should on the subsequent page, but the courses retains my loop variable rather than the value as I would like. I am concerned that my JS & HTML code function correctly for an intranet site working in an IE environment only, but I have a few errors that I am tr...

help Using HTML form (or javascript) to trigger SAS!
hi, i have a set of SAS macros, and all the macros are called from a single sas program. i wish to take the parameters for the macros from a simple HTML form... (no server side/client side complications... all done in 1 client machine using windows xp). could anyone help with some idea/code to make it so the user can simply enter the parameters in an HTML form and hit submit to trigger the SAS program. many thanks If you can assume your user will use IE for the browser, look into 'HTML Applications' (HTAs). I believe they can do this sort of thing. How would you get the values ...

Web resources about - Javascript for HTML select/option form with lots of entries - comp.lang.javascript

JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop
Your comprehensive JavaScript, DHTML, CSS, and Ajax stop

Let's Code: Test-Driven Javascript by James Shore — Kickstarter
James Shore is raising funds for Let's Code: Test-Driven Javascript on Kickstarter! A screencast series focusing on rigorous, professional Javascript ...

Eloquent JavaScript: A Modern Introduction to Programming
... and pragmatics. I loved the tutorial-style game-like program development. This book rekindled my earliest joys of programming. Plus, JavaScript! ...

Lightbox (JavaScript) - Wikipedia, the free encyclopedia
On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of ...

Open Directory - Computers: Programming: Languages: JavaScript: Tools: Obfuscators
about dmoz - help Top : Computers : Programming : Languages : JavaScript : Tools : Obfuscators Tools for obfuscation/compression JavaScript code. ...

Facebook Open-Sources JavaScript Static-Type Checker Flow
The latest software to be open-sourced by Facebook is Flow , a static-type checker for JavaScript . (more…) New Career Opportunities Daily: ...

Under the Hood: The JavaScript SDK - The use of polyfills - Facebook
Facebook Engineering hat eine Notiz mit dem Titel Under the Hood: The JavaScript SDK - The use of polyfills geschrieben. Du kannst den vollständigen ...

Quickstart: Facebook SDK for JavaScript
This quickstart will show you how to setup the SDK, load social plugins, trigger a dialog, and get it to make some basic Graph API calls.

Facebook App Devs Get Javascript
It has been an oft-lamented fact of the Facebook Platform thus far in its life that, in order to use all but the most simple of Javascript functionality–the ...

Badass JavaScript (@badass_js) on Twitter
WebGLWorker is an open source library that allows using WebGL from Web Workers. Great work as always from @kripken . blog.mozilla.org/research/2014/… ...

Resources last updated: 3/10/2016 12:55:03 PM