?
Solved

Is it possible to create a dynamically sorting drop down list

Posted on 2005-05-08
12
Medium Priority
?
230 Views
Last Modified: 2010-04-09
Hello out there (and happy mother's day where appropriate!).

I am trying to create a dynamically  and alphanetically sorted  drop-down list that contains a list of properties (addresses) in the island where I live (Barbados).

The default drop list in html takes you to the begining of the list of addresses that begin with the first letter that you type into the list input control (say K - for King Street).

Of course however when you type the next letter ( "i")  it then takes you to the top of the "i" list.

I realize that if you keep pressing "k" or the down arrown it keeps on going through the K entries. And this is fine for, say, countries - which are small in number for each letter. This unfortunately is impracticable for addresses.

Can anyone tell me how to create the dynamic list that I'm looking or and alternative solution that may equally solve my dilemma?

Many thanks in advance for all of your usual kind assistance.

wb
0
Comment
Question by:winbiz
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 300 total points
ID: 13955993
It is not really a functionality the works well on web pages but here are a couple of Previous solutions offered on the issue:

http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20524116.html
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20498838.html


Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13955997
They may have some more up to date approaches in the Javascript topic. This is only marginally realted to HTML.  It is very much a scripted solution.

Cd&
0
 

Author Comment

by:winbiz
ID: 13956015
Thanks Cd&.

I will look into these and get back.

Regards,

wb
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13960063
... This has not much to do with sorting.  Sorting should be done on the server side

If you want the selection to go to "King" when you type "Ki" in the select, the best solution is to use firefox:  http://www.mozilla.org/products/firefox/

Maybe IE7 will also use that behaviour...

It's usually better not to modify the default behaviour of form elements because the user will be confused when the element does not behave as expected.

You might want to think about a different way of selecting the address.  one that uses standard form elements only...
like a search text filed that pops up a window with a select that contains the matching results only.  then you can select the address you want from there.  that's how it's usually done (like on yahoo maps: http://maps.yahoo.com/mapsch?addr=&csz=paris&country=us ).
0
 
LVL 13

Accepted Solution

by:
StormyWaters earned 1200 total points
ID: 13964701
http:JavaScript/Q_21363477.html

Another interesting option, emulating Firefox's functionality.
0
 

Author Comment

by:winbiz
ID: 13966487
Stormy Waters. Your solution is exactly what I'm looking for. However, similar to sigkappu (who you orignally provided the solution to) I am just learning HTML and really have no experience with Java Script although it's becoming increasing obvious that I need to develop some skill with it if I am to proceed with the project I am working on.

I have reproduce my code below and was hoping you might be able to point out where I've gone astray in using your code.

Many thanks in advance.

-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--* Note: A transitional DTD is needed due to the use of link targets.   *-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>OneWorld Mortgage Maker</title>

<link rel="stylesheet" type="text/css" href="MyStyleSheet.css"/>


<head>
</head>
<script>
function jumpTo(sel) {
  var keycode = window.event.keyCode;
  var str = String.fromCharCode(keycode);
  if(!/[a-z0-9]/i.test(str))return;
  pressed += str;
  if(t) clearTimeout(t);
  t = setTimeout('pressed = ""', 5000);
  var re = new RegExp('^'+pressed, 'i');
  for(var i = 0; i < sel.options.length; i++) {
    if(re.test(sel.options[i].text)) {
       sel.options[i].selected = true;
       break;
     }
  }
}
</script>
<body bgcolor="#9400D3";>


<form>
<p class ="tfL" style="top: 5px; left: 0px; width: 120px";>
PROPERTY:
</p>

<input  type="text" name=PropertyFilter class="tfIT" style="top: 5px; left: 90px; width: 60px;" maxlength="10">

</input>

<select name=Property class="tfIT" style="top: 5px; left: 212px; width: 255px" maxlength="35" onkeypress="jumpTo(this);return false">
<option value="AbeyRoad">Abey Road </option>
<option value="Acton Court ">Acton Court </option>
<option value="Adelaide">Adelaide </option>
<option value="Amber Park">Amber Park </option>
<option value="Bay Street">Bay Street </option>
<option value="Belgrave">Belgrave</option>
<option value="Binly Rd">Binly Rd</option>
<option value="Borland Drive">Borland Drive</option>
</select>

<p class ="tfL" style="top: 5px; left: 474px" >
MortgageID
</p>

<input type="text" name=MortgageID class="tfIT" style="top: 5px; left: 573px" maxlength="10" size="5">
</input>

 <input type=SUBMIT VALUE="VIEW" class="tfIS" style="top: 5px; left: 658px"
 </input>
 
 <input type=SUBMIT VALUE="MENU" class="tfIS" style="top: 5px; left: 718px"
 </input>
 
 <br />
 
 <p class ="tfL" style="top: 30; left: 0px; width: 120px" >
Copy&nbsp;/&nbsp;Filter:
</p>


<select name="MainFilterA" class="tfIT" style="top: 30px; left: 90px; width: 80px">
<!-- onblur="this.style.width=20" onclick="this.style.width=150" size="1"> -->
  <option value="ClientPerson">Client Person </option>
  <option value="ClientCorporation">Client Corporation </option>
  <option value="LawFirms" selected>LawFirms</option>
  <option value="RealEstateCompanies">Real Estate Companies </option>
</select>

<select name=MainFilterB class="tfIT" style="top: 30px; left: 180px; width: 237px" maxlength="10" >
<option value="ClientPerson">Client Person</option>
<option value="ClientCorporation">Client Corporation</option>
<option value="LawFirms" selected>LawFirms   - this sets</option>
<option value="RealEstateCompanies">Real Estate Companies</option>
</select>

<select name=MainFilterB class="tfIT" style="top: 30px; left: 401px; width: 237px" maxlength="10" >
<option value="ClientPerson">Client Person</option>
<option value="ClientCorporation">Client Corporation</option>
<option value="LawFirms" selected>LawFirms   - this sets</option>
<option value="RealEstateCompanies">Real Estate Companies</option>
</select>

 <input type=SUBMIT VALUE="EDIT" class="tfIS" style="top: 30px; left: 658px"
 </input>
 
 <input type=SUBMIT VALUE="ADD" class="tfIS" style="top: 30px; left: 718px"
 </input>
 
<br />
<!--
<input type="button" value="Mortgage" class ="tfTab" style="top: 65px; left: 7px" >
-->
<div class="tabBox" style="clear:both; position: absolute; left: 5px; top: 65px; width: 770px; height: 343px;">
 <div class="tabArea">
        <a class="tab activeTab">Mortgage</a>
        <a class="tab">Status</a>
        <a class="tab">Send</a>
        <a class="tab">Recieved</a>
        <a class="tab">Actions</a>
        <a class="tab">Registry</a>
        <a class="tab">Delegate</a>
        <a class="tab">Invoice</a>
        <a class="tab">Stage Management</a>
        

        
 </div>
      
 <div class="tabMain">
        <iframe src="OneWorldEntrance.html" style="height: 340px; width: 375px;"></iframe><iframe src="LoginForm.php" style="height: 340px; width:375px;"></iframe>
 </div>
</div>


</form>

</body>

</html>

----------------------

wb.
0
 

Author Comment

by:winbiz
ID: 13968995
Stormy waters,

To be specific. I get "error on page" error when I try to type in the second letter...

Thanks again...
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 13969703
You forgot a line.

Put:
pressed = '';

on a line below <script> and before the function starts.

Also naming two different select boxes the same name, even if they aren't the select box you're adding the script to, might break it.

In addition, your page is invalid for XHTML. Is there a reason you're using that instead of the more reasonable HTML 4.01 Strict? You should only use XHTML if you need XML capabilities in your document.
0
 

Author Comment

by:winbiz
ID: 13974822
Hello again stormywater,

On your advice I now use document type:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

1. Thank you for pointing out my duplicate use of  "MainFilterB". 'Twas an error on my part and have corrected it accordingly.

2.
I am very new to html, and was under the impression that I had to use a transitional document version b/c of my use link targets and iframe. But apparently no problem. My below code now works as I intend except for the dynamic drop down list
<select name=Property

despite having followed your instruction of adding  
pressed = ";  (this is supposed to be double quotes right - or is it two single quotes?).

Could you have another look please. I would really like to get this functionality.
I believe that my code's cleaner now so hopefully it'll easier on the eyes this time.

Many thanks in advance.

wb
------------------------------------------

<? session_start()?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 


<html>

<title>OneWorld Mortgage Maker</title>

<head>

<link rel="stylesheet" type="text/css" href="MyStyleSheet.css"/>

</style>
<script type="text/javascript">//<![CDATA[

function synchTab(frameName) {

  var elList, i;

  // Exit if no frame name was given.

  if (frameName == null)
    return;

  // Check all links.

  elList = document.getElementsByTagName("A");
  for (i = 0; i < elList.length; i++)

    // Check if the link's target matches the frame being loaded.

    if (elList[i].target == frameName) {

      // If the link's URL matches the page being loaded, activate it.
      // Otherwise, make sure the tab is deactivated.

      if (elList[i].href == window.frames[frameName].location.href) {
        elList[i].className += " activeTab";
        elList[i].blur();
      }
      else
        removeName(elList[i], "activeTab");
    }
}

function removeName(el, name) {

  var i, curList, newList;

  if (el.className == null)
    return;

  // Remove the given class name from the element's className property.

  newList = new Array();
  curList = el.className.split(" ");
  for (i = 0; i < curList.length; i++)
    if (curList[i] != name)
      newList.push(curList[i]);
  el.className = newList.join(" ");
}

//]]></script>

<!-- Script for Dynamic Drop Down list -->
<script>
pressed = ";

function jumpTo(sel) {
  var keycode = window.event.keyCode;
  var str = String.fromCharCode(keycode);
  if(!/[a-z0-9]/i.test(str))return;
  pressed += str;
  if(t) clearTimeout(t);
  t = setTimeout('pressed = ""', 5000);
  var re = new RegExp('^'+pressed, 'i');
  for(var i = 0; i < sel.options.length; i++) {
    if(re.test(sel.options[i].text)) {
       sel.options[i].selected = true;
       break;
     }
  }
}
</script>
<body bgcolor="#9400D3";>
</head>

<form>
<div class="tabBox" style="clear:both;   background-color: #d0b0ff; border: 2px solid #000000; border-bottom-width: 0px;border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff; position: absolute; left: 2px; top: 3px; width: 770px; height: 56px;">
      
            <p class ="tfL" style="font-size: 105%; top: 5px; left: 0px; padding: 1px
            1em 1px ; width: 118px";>
            Property &nbsp;:
            </p>
            
            
            <select name=Property class="tfIT" style="top: 5px; left: 90px; width:
            299px;" maxlength="35" onkeypress="jumpTo(this);return false">
            <option value="AbeyRoad">Abey Road </option>
            <option value="Acton Court ">Acton Court </option>
            <option value="Adelaide">Adelaide </option>
            <option value="Amber Park">Amber Park </option>
            <option value="Bay Street">Bay Street </option>
            <option value="Belgrave">Belgrave</option>
            <option value="Binly Rd">Binly Rd</option>
            <option value="Borland Drive">Borland Drive</option>
            </select>
            
            <select name="MainFilter" class="tfIT" style="top: 5px; left: 390px;
            width: 140px;" maxlength="10">
            <!-- onblur="this.style.width=20" onclick="this.style.width=150" size="1"> -->
              <option value="CurrentProperty" selected>CurrentProperty</option>
              <option value="AddProperty">Add Property</option>
              <option value="SearchProperty">Search Property</option>
              <option value="SearchByClient">Search By Client </option>
            </select>
            
            <p class ="tfL" style="top: 5px; left: 520px; width 50px;" >
            MortgageID
            </p>
            
            
            
            <select name=Property class="tfIT" style="top: 5px; left: 605px; width:
            64px;">
            <option value="Open" selected>Open</option>
            <option value="Complete">Complete</option>
            <option value="Closed">Closed</option>
            </select>
            
             <input type=SUBMIT VALUE="View" class="tfIS" style="top: 5px; left:
             675px"
             </input>
             
             <input type=SUBMIT VALUE="Menu" class="tfIS" style="top: 5px;left:725px"
             </input>
             
             <br />
             
             <p class ="tfL" style="font-size: 105%; top: 30px; left: 0px; width:
             120px" >
            Copy/Filter:
            </p>
            
            
            <select name="EntityFilterA" class="tfIT" style="top: 30px; left: 90px;
            width: 90px">
            <!-- onblur="this.style.width=20" onclick="this.style.width=150" size="1"> -->
              <option value="ClientPerson">Client Person </option>
              <option value="ClientCorporation">Client Corporation </option>
              <option value="LawFirms" selected>LawFirms</option>
              <option value="RealEstateCompanies">Real Estate Companies </option>
            </select>
            
            <select name=EntityFilterB class="tfIT" style="top: 30px; left: 181px;
            width: 208px;" maxlength="10" >
            <option value="ClientPerson">Client Person</option>
            <option value="ClientCorporation">Client Corporation</option>
            <option value="LawFirms" selected>LawFirms   - this sets</option>
            <option value="RealEstateCompanies">Real Estate Companies</option>
            </select>
            
            <select name=EntityFilterC class="tfIT" style="top: 30px; left: 390px;
            width: 280px" maxlength="10" >
            <option value="ClientPerson">Client Person</option>
            <option value="ClientCorporation">Client Corporation</option>
            <option value="LawFirms" selected>LawFirms   - this sets</option>
            <option value="RealEstateCompanies">Real Estate Companies</option>
            </select>
            
             <input type=SUBMIT VALUE="Edit" class="tfIS" style="top: 30px; left:
             677px"
             </input>
             
             <input type=SUBMIT VALUE="Add" class="tfIS" style="top: 30px; left:
             725px"
             </input>
</div>
<br />

<div class="tabBox" style="clear:both; position: absolute; left: 5px; top: 70px; width: 770px; height: 343px; background-color: #9070c0;">
  <div class="tabArea">
    <a class="tab" href="Mortgage.html" target="tabIframe2">Mortgage</a>
    <a class="tab" href="MainStatus.php" target="tabIframe2">Status</a>
    <a class="tab" href="MainSend.php" target="tabIframe2">Send</a>
    <a class="tab" href="MainReceived.php" target="tabIframe2">Received</a>
    <a class="tab" href="MainActions.php" target="tabIframe2">Actions</a>
    <a class="tab" href="MainRegistry.php" target="tabIframe2">Registry</a>
    <a class="tab" href="MainDelegate.php" target="tabIframe2">Delegate</a>
    <a class="tab" href="MainInvoice.php" target="tabIframe2">Invoice</a>
    <a class="tab" href="MainStageManagement.php" target="tabIframe2">Stage Management</a>
  </div>
  <div class="tabMain">
        <div class="tabIframeWrapper"><iframe class="tabContent" name="tabIframe2" src="Mortgage.html" style="height: 338px; width: 750px;" ></iframe></div>
  </div>
</div>


</form>

</body>

</html>

0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 13979613
No, it's two single quotes, initializing the variable so we can use it later globally.
0
 

Author Comment

by:winbiz
ID: 13982352
Hi storymy. Have changed the double quotes to single , but now I get the error
"run time error has occcurred on line 72. "t" is undefine.

Line 72 is : if(t) clearTimeout(t);.

I must admit I feel somewhat silly. As I've probably done something quite basically wrong. The problem is that i truly don't have complete grasp of the code you've provided (I usually don't like to use code that I don't understand backwards - but I just need the functionality that am accustomed to from the prototype of my program that I wrote in - don't laugh - MS access, which I've found to be quite good for development - but some of it's little features do not translate easily to html/php/javascript).

If you could humour me to just help me get this little bit of code running I would be very grateful.

Thanks again

wb.
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 13982946
Logic error on my part, add this line:

t = null;

just after this one:

pressed = '';

I tested a copy of your page and it works now. You might want to tweak the 5000 value of the setTimeOut() function, which is 5000 ms at the moment, until the time seems natural.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question