?
Solved

auto complete box Part 2

Posted on 2005-04-18
21
Medium Priority
?
578 Views
Last Modified: 2012-05-05
I received this code for one of the Experts (works great). It is an auto-complete box with a dropdown menu. One last piece of my puzzle is this. I will connect to my database and populate the dropdown menu (no help on this part needed). I need 3 auto-complete boxes with dropdown menus, where when the last menu is selected it brings up a page. Are there any samples I can use for this ? Anything such as manufacturer/make/model, or state, city, county, etc. ? Any combo would do.
Thanks,
Michael

<html>
<head>
<script language=javascript>

var items;

function init(){
     items=document.getElementById('all_items');
}

function position(txtOb){
     for(var i=0;i<items.length;i++)
          if(items[i].text.substring(0,txtOb.value.length).toLowerCase()==txtOb.value.toLowerCase())
               items.selectedIndex=i              
     return true
}
</script>
</head>
<body onload="setTimeout('init()', 10)">
<input type="text" name="txtKeyword" id="idKeyword" value="" onkeyup="position(this)" />
<select name="all_items" id="all_items">
     <option Value="" selected>Choose a State
     <option Value="AL">Alabama
     <option Value="AK">Alaska
     <option Value="MD">Maryland
     <option Value="NJ">New Jersey
     <option Value="NM">New Mexico
     <option Value="NY">New York
     <option Value="NC">North Carolina
     <option Value="ND">North Dakota
     <option Value="OH">Ohio
     <option Value="PA">Pennsylvania
     <option Value="RI">Rhode Island
     <option Value="SC">South Carolina
     <option Value="VT">Vermont
     <option Value="VA">Virginia
     <option Value="WA">Washington
</select>
</body>
</html>


0
Comment
Question by:mhoggatt1
  • 9
  • 7
  • 4
  • +1
21 Comments
 

Author Comment

by:mhoggatt1
ID: 13810104
Hi archrajan,
  In the first link you sent, does it include the auto-complete features ? My drop down munus may be lengthy so I need this feature.
Thanks,
0
 
LVL 32

Expert Comment

by:ldbkutty
ID: 13810558
Slightly edited from my previous comment:

 There are four options:

(1) Server-Side: If you need to get the data for the second drop down box data from the database then you'll have to re-parse the page to the web server. (i.e.) You can use onchange="this.form.submit()" in you first drop-down box and populate the next dropdown box based on the selected value. The disadvantage is that the page will be submitted everytime when the user changes the option. It might take long time and/or might be inconvenient when there are other numerous form-fields. Here's my answer based on server-side: http:Q_21260505.html#12948858

(2) Client-Side: Query the database initially and store all results in a JS array. Then, you can use onchange="jsFunction()" in your first drop-down box, where jsFunction() is the JavaScript function that actually populates the second drop-down based on the selected value and the pre-defined JS array. Its better to do it on server side if your total count of option combinations is greater then two thousand combinations, because JavaScript function needs to have ALL data at browser side. Here's my previous similar question: http:Q_21103384.html

(3) JSRS: Use JavaScript Remote Scripting with which you dont need to worry about the number of combinations of options and page reloading. *I personally prefer this method*. Here are the links :

http://www.ashleyit.com/rs/
http://www.ashleyit.com/rs/jsrs/select/php/select.php

>> Anything such as manufacturer/make/model, or state, city, county, etc. ?
Yes, JSRS has an exmple for manufacturer/make/model dropdown boxes!

(4) Frames: Although I hate using Frames for dependant selection box, it is an option too. Have every selection box in a frame and populate based on the previous selections!

// Michael, I remember once we had a discussion about dependant dropdown boxes in PHP TA! I could not remember which question it was, but didn't that helped you!
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mhoggatt1
ID: 13810944
Hi Balakrishnan,
   Boy what a load of info ! Thanks. Yes we did talkabout this subjuect before and I asked a question about the auto-complete dropdown boxes in the PHP section, but they said I would have to go with the JS. I just wasn't sure how to handle this kind of menu. My first menu will have 66 books, then chapters, then veerses. It seemed useful the ohave the auto-complete to save time. Can this be done in PHP ?
Thanks again,
Michael
0
 
LVL 32

Accepted Solution

by:
ldbkutty earned 2000 total points
ID: 13811140
I assume each of the 66 book have several chapters and each chapter has several veers. Now this is quite huge and JS cannot handle too much of information to be populated when the page loads!

My suggestion is to use JSRS. The only problem with JSRS is that it is not well documented well and so its bit difficult to rename the fields or to alter the JS pages for a newbie (but not impossible). But it has the great advantage of remote scripting! Have a try.

Do you want to have 3 text-boxes beside the 3 dropdowns and auto-complete the dropdowns based on the corresponding textboxes !?
0
 

Author Comment

by:mhoggatt1
ID: 13811248
Part of my site will be for people with low vision (such as myself). I would have 3 auto complete boxes with a dropdown menu for each. If I start typing Ben, then General Motors would come up in the dropdown menu. This way I don't have to scan down the menu, and so on for the other 2 menus. JSRS seems like the way to go, but may be beyond my ability to do, but I'm willing to give it a go.

Actually I wouldn't need the auto complete boxes fi there was a way to enlarge the dropdown menus so I could use larger fonts. Is there a way to do this ?

Should I download the files from the link to get started ? Then what should I do ?
Thanks,
0
 
LVL 32

Assisted Solution

by:ldbkutty
ldbkutty earned 2000 total points
ID: 13811642
>> Actually I wouldn't need the auto complete boxes fi there was a way to enlarge the dropdown menus so I could use larger fonts. Is there a way to do this ?

Do you mean you want to increase the font size of the options list !? If yes, here's an example:

<html>
<head>
<style type="text/css">
.sel_style {
 font-family: verdana;
 font-size: 12pt;
 color: blue;
}
</style>
</head>
<body>
<select name="my_sel" class="sel_style">
<option value="">-Select-</option>
<option value="1">This is my very long long text as an option for this dropdown menu</option>
</select>
</body>
</html>

>> Should I download the files from the link to get started ? Then what should I do ?

Yes, download the selectphp.zip file form here: http://www.ashleyit.com/rs/jsrs/select/php/select.php

Unpack it in "htdocs" directory and run the .sql file in your mysql.

Just for trying the demo in your system. Then you can change the original tables, table columns in select_rs.php

select.php => File that has the dropdown menu. If there is any problem in the database connection/query, you'll get the option as "Not yet loaded" in the webpage!

result.php => This is just an example of showing the selected list in the next page. (PS: You dont need it)

Once you get the example working and see the php/js pages, you'll be most excited to make it for your requirement. :=)
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13811687
I think what you are asking should not be a problem for javascript as far as performance is considered, but I don't get this part you said

> If I start typing Ben, then General Motors would come up in the dropdown menu.

can you explain it better..? however, when data is presented to the javascript as an array then it's really fast and processes huge amount of data happily  :)
0
 
LVL 32

Expert Comment

by:ldbkutty
ID: 13811805
>> however, when data is presented to the javascript as an array then it's really fast and processes huge amount of data happily  :)

JavaScript function needs to have ALL data at browser side.

With 66 books, assuming there are atleast 10 chapters for each book and each chapter has 10 veers. The total number of options combinations is growing too much: 66 X 10 X 10 !
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13811831
I just looked in the dictionary for a word "veer" and now I see what you mean...  :) but would you not like to try and see how good/bad it can get..?  :)

lets just wait for asker's next response
0
 

Author Comment

by:mhoggatt1
ID: 13811841
davidlars99,
Sorry for the typo, I did mean Gen for General Motors. I think the JSRS is the way to go, but do you know of sample code that will give me the 3 auto-complete/dropdown menu forms I'm looking for ?
Thanks,
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13811853
ok I would gladly try it out, but could you explain it once more with a little more detailed information..?
0
 
LVL 13

Expert Comment

by:davidlars99
ID: 13811869
0
 

Author Comment

by:mhoggatt1
ID: 13811935
davidlars99,
   I may not need the auto-complete now. The sample code idbkutty sent me on making the dropdown menus larger may take care of the problem. I'll download the zip files and see what I can do.
Thanks,
0
 

Author Comment

by:mhoggatt1
ID: 13812040
I have been reading over the comments and noticed I missed something idbkutty mentioned in his example 66x10x10. There will be amny more than this application so I'm definitely going to have to use JSRS. Time to call it a night so I'll start on this project tomorrow ! Oh yes, where did I use the word 'veer' ? If I did I mispelled something, sorry for the mistake.
Michael
0
 
LVL 32

Expert Comment

by:ldbkutty
ID: 13812051
what is "veer" !!?? I assumed it as "courses", is it not !?

anyway, all the best with jsrs.
0
 

Author Comment

by:mhoggatt1
ID: 13815577
Balakrishnan,
  I unpacked the zip file and I see the .sql instructions, but I'm not familiar with this part of your instructions -

and run the .sql file in your mysql.


Exactly how do I use this file ?
Thanks,
Michael
0
 
LVL 32

Expert Comment

by:ldbkutty
ID: 13815667
Open the .sql file in notepad, you'll see sql commands. Run those queries in phpmyadmin or sql console. The queries in that file are required to run the given example.
0
 

Author Comment

by:mhoggatt1
ID: 13816910
Ok I figured out how to run the sql. I get back to this project later today.
Thanks,
0
 

Author Comment

by:mhoggatt1
ID: 13818805
Balakrishnan,
   Ok the JSRS is installed and works fine as a demo. Now to start the modification process..
Thanks,
Michael
0
 
LVL 32

Expert Comment

by:ldbkutty
ID: 13818919
:=)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

621 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