Quickest way to access very long drop down lists

O

Odin

Hello
I am making a webpage with two dropdown menus.
First I have a dropdown menu with a list of 235 countries. When one
country is selected from this list the contents of the next dropdown
menu is decided from a coresponding file containing a huge amount of
cities. The biggest of these files being 6 MB.

Getting different advices I have now to different sets of code doing
this thing. Does anyone know if any of these two sets of code is
suitable for what I want?

Here comes an example of the first set of code - Example 1:
First the main file:
<HTML>
<Title>Choose countries and cities from dropdown</Title>
<SCRIPT>
var va_optionslist=['Canada', 'USA', 'Norway', 'Mexico'];
function Publish_CountryList()
{
var vo_options;
for (var i=0; i<va_optionslist.length; i++)
{
vo_options = new Option(va_optionslist, va_optionslist);
document.myForm.SEL_Countries.options=vo_options;
}
document.myForm.SEL_Countries.value='USA';
}
function Update_CityList(po_CountryObj)
{
window.frames['ifm1'].location.href = po_CountryObj.value + '.htm';
}
</SCRIPT>
<BODY onload="Publish_CountryList()">
<form name="myForm">
<SELECT id="SEL_Countries" name="SEL_Countries"
onChange="Update_CityList(this)">
<OPTION value=0>Please Select A Country</Option>
</SELECT>
</form>
<iframe name=ifm1 id='ifm1' src="USA.htm">
</BODY>
</HTML>

and then coresponding data file for one country: (USA)
<HTML>
<Title>City data for USA</Title>
<SCRIPT>
var va_optionslist=['New York City', 'District Of Columbia', 'San
Fransisco', 'Los Angeles'];
function Update_CityList()
{
document.myForm.SEL_Cities.innerHTML="";
for (var i=0; i<va_optionslist.length; i++)
{
document.myForm.SEL_Cities.options=new Option(va_optionslist,
va_optionslist);
}
}
</SCRIPT>
<BODY onload="Update_CityList()">
<form name="myForm">
<SELECT id="SEL_Cities" name="SEL_Cities">
<OPTION value=0>Please Select A City</Option>
</SELECT>
</form>
</BODY>
</HTML>


Here comes an example of the second set of code - Example 2:
First the main file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Choose countries and cities from dropdown</title>
</head>
<body>
<form name="myForm" action="someServerScript.php" target="ifm">
<select onChange="window.frames['ifm1'].location.href=this.value">
<option value='0'>Please Select A Country</option>
<option value='Canada.htm'>Canada</option>
<option value='USA.htm'>United States</option>
<option value='Norway.htm'>Norway</option>
<option value='Mexico.htm'>Mexico</option>
</select>
</form>
<iframe name='ifm1' src="USA.htm">
</body>
</html>

and then the coresponding data file for one country: USA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>City data for USA</title>
</head>
<body>
<form name="myForm"
<select id="SEL_Cities">
<option value="0">Please Select A City</option>
<option value="New York City">New York City</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="San Francisco">San Francisco</option>
<option value="Los Angeles">Los Angeles</option>
</select>
</form>
</body>
</html>

Each city in USA is identified with name, county and state. (Short form
in example) And there is about 100000 places in the list so it is
important to make the USA.htm as small as possible.
When each city is mentioned twice in the code I think maybe this will
take to much space? And resulting in longer time needed to load the
information?:
<option value="District Of Columbia">District Of Columbia</option>

Odin
 
R

RobG

Odin said:
Hello
I am making a webpage with two dropdown menus.
First I have a dropdown menu with a list of 235 countries. When one
country is selected from this list the contents of the next dropdown
menu is decided from a coresponding file containing a huge amount of
cities. The biggest of these files being 6 MB.
Click to expand...

Do the search on the server, that way:

- You won't dump 6 MB onto the client when they want maybe 5 words

- You have far better searching capability (soundex, indexes, other)

- You have consistent and known performance - you have no idea what the
client machine is or isn't capable of
Getting different advices I have now to different sets of code doing
this thing. Does anyone know if any of these two sets of code is
suitable for what I want?

Here comes an example of the first set of code - Example 1:
First the main file:
<HTML>
<Title>Choose countries and cities from dropdown</Title>
<SCRIPT>
Click to expand...

The type attribute is required:

<script type="text/javascript">

[...]
<body>
<form name="myForm" action="someServerScript.php" target="ifm">
<select onChange="window.frames['ifm1'].location.href=this.value">
<option value='0'>Please Select A Country</option>
<option value='Canada.htm'>Canada</option>
<option value='USA.htm'>United States</option>
<option value='Norway.htm'>Norway</option>
<option value='Mexico.htm'>Mexico</option>
Click to expand...

You can trim down your code by not including the closing </option> tag
(it's optional in HTML 4).

[...]
Each city in USA is identified with name, county and state. (Short form
in example) And there is about 100000 places in the list so it is
important to make the USA.htm as small as possible.
When each city is mentioned twice in the code I think maybe this will
take to much space? And resulting in longer time needed to load the
information?:
<option value="District Of Columbia">District Of Columbia</option>
Click to expand...

You can further trim bloat by using the text only and don't include a
value attribute:

<option>District Of Columbia

then get the options text attribute rather than the value, something like:

var state = theSelect(theSelect.selectedIndex).text;

[...]
 
A

ASM

Odin a écrit :
Hello
I am making a webpage with two dropdown menus.
First I have a dropdown menu with a list of 235 countries.
Click to expand...

Ho! no ! poor !
how to find something in this crowdly list ?
When one
country is selected from this list the contents of the next dropdown
menu is decided from a coresponding file containing a huge amount of
cities. The biggest of these files being 6 MB.
Click to expand...

Hu ? you mean : 6ko , no ?
Getting different advices I have now to different sets of code doing
this thing.
Click to expand...

Haaa !
Does anyone know if any of these two sets of code is
suitable for what I want?

Here comes an example of the first set of code - Example 1:
First the main file:
<HTML>
<Title>Choose countries and cities from dropdown</Title>
<SCRIPT>
var va_optionslist=['Canada', 'USA', 'Norway', 'Mexico'];
Click to expand...

var va_optionslist=['Canada', 'USA', 'South-America', 'Africa', 'Asia', ...];
function Publish_CountryList()
{
var vo_options;
for (var i=0; i<va_optionslist.length; i++)
{
vo_options = new Option(va_optionslist, va_optionslist);
document.myForm.SEL_Countries.options=vo_options;
}
document.myForm.SEL_Countries.value='USA';
}
function Update_CityList(po_CountryObj)
{
Click to expand...


var U = po_CountryObj.options[po_CountryObj.selectedIndex].value
parent.frames['ifm1'].location.href = U+'.htm';
window.frames['ifm1'].location.href = po_CountryObj.value + '.htm';
}
</SCRIPT>
<BODY onload="Publish_CountryList()">
<form name="myForm">
<SELECT id="SEL_Countries" name="SEL_Countries"
onChange="Update_CityList(this)">
<OPTION value=0>Please Select A Country</Option>
</SELECT>
</form>
<iframe name=ifm1 id='ifm1' src="USA.htm">
</BODY>
</HTML>

and then coresponding data file for one country: (USA)
<HTML>
<Title>City data for USA</Title>
<SCRIPT>
var va_optionslist=['New York City', 'District Of Columbia', 'San
Fransisco', 'Los Angeles'];
Click to expand...

no alphetical list ?
function Update_CityList()
{
document.myForm.SEL_Cities.innerHTML="";
for (var i=0; i<va_optionslist.length; i++)
{
document.myForm.SEL_Cities.options=new Option(va_optionslist,
va_optionslist);
}
}
</SCRIPT>
<BODY onload="Update_CityList()">
<form name="myForm">
<SELECT id="SEL_Cities" name="SEL_Cities">
<OPTION value=0>Please Select A City</Option>
</SELECT>
</form>
</BODY>
</HTML>


Here comes an example of the second set of code - Example 2:
First the main file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Choose countries and cities from dropdown</title>
</head>
<body>
<form name="myForm" action="someServerScript.php" target="ifm">
Click to expand...


<select onChange="window.frames['ifm1'].location.href=this.value">
Click to expand...

no ! don't put an onchange
(overall if it doesn't work with any browser)
<option value='0'>Please Select A Country</option>
<option value='Canada.htm'>Canada</option>
<option value='USA.htm'>United States</option>
<option value='Norway.htm'>Norway</option>
<option value='Mexico.htm'>Mexico</option>
</select>
Click to expand...

<input type=submit value="GO"
onclick="this.form.action=this.form[0].options[this.form[0].selectedIndex].value;">
</form>
<iframe name='ifm1' src="USA.htm">
</body>
</html>
Click to expand...

this second way smells beter because you can have different
names for html files and for countries
(it's beter to have 'usa.htm' than 'united states.htm'
that's to say without a space in file name)
take care to be in habit to name your files all in lower case
to avoid mistakes with caracters forgotten in upper case
and then the coresponding data file for one country: USA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>City data for USA</title>
</head>
<body>
<form name="myForm"
<select id="SEL_Cities">
<option value="0">Please Select A City</option>
<option value="New York City">New York City</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="San Francisco">San Francisco</option>
<option value="Los Angeles">Los Angeles</option>
</select>
</form>
</body>
</html>

Each city in USA is identified with name, county and state. (Short form
in example) And there is about 100000 places in the list so it is
important to make the USA.htm as small as possible.
When each city is mentioned twice in the code I think maybe this will
take to much space? And resulting in longer time needed to load the
information?:
<option value="District Of Columbia">District Of Columbia</option>
Click to expand...


You could have : data('dc_colbia-District Of Columbia','ny-New York City')

function set_select() {
for(var i=0;i<data.length;i++) {
var O = data.split('-');
vo_options = new Option(O[0], O[1]);
document.myForm.SEL_Countries.options=vo_options;
}
}

and
<input type=submit value="GO"
onclick="this.form.action=this.form[0].options[this.form[0].selectedIndex].value+'.htm';">
 
O

Odin

Thank you for your answers
Following your advices I change the code to:

Main file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Choose countries and cities from dropdown</title>
</head>
<script type="text/javascript">
function DeleteText(tekst)
{
tekst.value='';
}
function FindCities()
{
window.frames['ifm1'].location.href=document.myForm1.SEL_Countries.value+'_'+document.myForm1.StartStedsNavn.value+'.htm'
}
</script>
<body>
<form name="myForm1" action="../someServerScript.php" target="ifm">
<select id="SEL_Countries" name="SEL_Countries" >
<option value='0'>Please Select A Country
<option selected value='USA'>USA
<option value='Norway'>Norway
<option value='Canada'>Canada
<option value='Mexico'>Mexico
</select>
<p>
<input onkeyup="FindCities()" onkeydown="DeleteText(this)"
onclick="DeleteText(this)" type="text" name="StartStedsNavn"
value="Type first letter in Place of Birth" size="29"></p>
<p>&nbsp;</p>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Place of Birth</p>
<iframe name='ifm1' src="USA_a.htm" width="222" height="197">
</body>
</html>

and data file "USA_a.htm":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>City data for USA starting with letter A</title>
</head>
<body>
<form name="myForm"
<p>
<select id="SEL_Cities" size="1">
<option>Please Select A City
<option>Alabama
<option>Alamo
<option>Albert
<option>Alexis
</select>
</p>
</form>
</body>
</html>

Using an alpabetical list and making the data files smaller.
- You have far better searching capability (soundex, indexes, other)
Click to expand...
How do I do this?

Odin
 
R

RobG

Odin said:
Thank you for your answers [...]

Using an alpabetical list and making the data files smaller.

- You have far better searching capability (soundex, indexes, other)
Click to expand...

How do I do this?
Click to expand...

On the server, but that is a question for a group oriented toward your
particular server and database combination.

As for the client UI, try the google suggest page here - just start
typing into the text field and suggestions are made:

<URL:http://www.google.com/webhp?complete=1&hl=en>

More info:

<URL:http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3
Very Basic CC Validation Javascript 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
action_page.php form 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How do I fix this issue in sqaurespace code block? 1
Survey details won't go through using php, ajax, Mysql 0

Members online

Total: 50 (members: 1, guests: 49)
Robots: 165

Forum statistics

Threads
473,983
Messages
2,570,187
Members
46,747
Latest member
jojoBizaroo

Latest Threads

Top