Quick search box

**paulcj2** · May 6, 2006 12:06

I am building a "quick search" navigation box to display "I wants" in a drop-down list, so people can click what they want and be taken to an appropriate page. So far I have:

Code:

 <form name="quicksearch">
<select name="search">
<option name="this" value="this">I want this url.</option>
<option name="that" value="that">I want that url.</option>
<option name="another" value="another">I want another url.</option>
</select>
</form>

Where do I put the url's and how make it clickbable without the "Submit" button?

**cmuench** · May 6, 2006 19:01

So like an javascript jump box?
I think this is exactly waht you want.
http://www.mcfedries.com/JavaScript/linklist.asp

**Contrid** · May 6, 2006 20:21

Yeah...you could try javascript. I haven't tried that yet, but here goes...

Put this code into the <head> of your page :

And then do the following to each selection :

You will notice that the first part of code above contains a function which is named 'redirect()' and points to a specific URL. You could create a function for each <option> tag.

Hope this helps.

**fisherboy** · May 6, 2006 22:18

You can use the very simple javascript on this page if you like. It's very straightforward and validates.

**spdrus** · May 11, 2006 18:13

Hi fisherboy,

I was also interested in something like this so..once again you've been a big help (I guess I should just follow you all over Sitepoint to learn --PS I'm NOT A STALKER LOL!--)

I do have one question though, where is the argument 'this' coming from when you call the function--I am familiar with C++ and it looks like you are passing it a variable called 'this' however I cant find where 'this' is being set?

Thanks!
Bill

**fisherboy** · May 11, 2006 18:28

Hi Bill

If you follow me everywhere we will soon be very, very lost!

The code has been copied and pasted from a help site on the internet (if memory serves me it was from Bravenet). I chose it because it seemed the simplest.

Unfortunately my understanding of javascript is so close to nil you can hardly tell the difference. All I can tell you is that it works. You may like to post it in the Javascript Forum for some expert comment?

Cheers

**paulcj2** · Jun 10, 2006 06:00

Thanks guys for the options above. After working with them a while, I found the following that does just what I want:

Code:

<form name="jump1">
<select name="myjumpbox"
OnChange="location.href=jump1.myjumpbox.options[selectedIndex].value">
	 <option selected>Please Select...
	 <option value="/about/10/">accommodations</option>
	 <option value="/about/287/">arrival and departure</option> 
	 <option value="/healing_arts/138/">ayurveda at kripalu</option> 
<option value="/program/program/proftraining/cec/">CE credits</option> 
</select>
</form>

adapted from:
http://www.davesite.com/webstation/js/theory1jump.shtml

**Egor** · Jun 10, 2006 07:16

Paul, just make sure you add some <noscript></noscript> content below (either a button, or a <ul> of all the locations).

**paulcj2** · Jun 12, 2006 05:20

Egor,

Re:

Paul, just make sure you add some <noscript></noscript> content below (either a button, or a <ul> of all the locations).

What will that do for me? Seems to work fine as is. Please provide example code.

**fisherboy** · Jun 13, 2006 19:07

Hi Paul

The NOSCRIPT element allows authors to provide alternate content when a script is not executed. Just means that people without js will get to view an alternative and not be penalised for visiting your site.

Some people disable javascript to avoid pop-ups and other nasties. Others may be using text only readers. Some corporates disable it as a security precaution. Apparently at least 6 in every 100 users disable js for some reason.

I disabled it when overseas using very expensive connections to help reduce my bandwidth use.

Hope this helps.....

**paulcj2** · Jun 14, 2006 06:02

Fisherboy,
Yes, that helps. I tried looking at the jump boxwith JavaScript disabled. The main menu also depends on JavaScript. This did not display correctly, however the jump box DID. Would you have any idea why the jump box would still display correctly with JavaScript disabled?

**paulcj2** · Jun 14, 2006 10:26

Fisherboy,

Aha! The jump box displays correctly, but the links do not work when JavaScript is disabled. I added a <script></noscript> alert:

JavaScript must be enabled in your browser to view this website.

Thanks for the help.

**fisherboy** · Jun 14, 2006 15:18

Originally Posted by paulcj2

Fisherboy,

Aha! The jump box displays correctly, but the links do not work when JavaScript is disabled. I added a <script></noscript> alert:Thanks for the help.

I guess you mean <noscript></noscript>?

I'm pleased it's working Paul. Have fun!

**paulcj2** · Jun 14, 2006 16:53

Re:

I guess you mean <noscript></noscript>?

Yes. Many thanks.

User Tag List

Thread: Quick search box

Thread Tools

Display

Quick search box

Bookmarks

Bookmarks

Posting Permissions