SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Down Search

    I'm not sure if javascript would be the answer to do this or not, but I want to do a drop down search and based on the selection, it will produce search results. Here's the thing: they each exist in a separate database.

    I kind of have the concept down, basically add a value to each of the selections so that when 1 of them is selected; the values will be used from that selection, but I just not sure how to do that.

    Any help would be greatly appreciated! Thanks! Attached is a picture of what I have.

    Here's my code:

    Code:
    <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
    				<div>
    					<select name="v" id="searchOptions">
    						<option value="" selected="selected">Site</option>
    						<option value="http://sfdefender.local/addressbook/search.php">Contacts</option>
    						<option value="cal">Calendar</option>
    					</select>
    					<input value="Search (press Enter)" onfocus="if(this.value == 'Search (press Enter)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search (press Enter)';}" type="text" size="15" name="s" id="s" />
    				</div>
    			</form>
    Attached Images Attached Images

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see where JavaScript will play a roll here unless you're doing some sort of AJAX implementation. Otherwise, a form is a form you can access these dropdown results with php as such:

    Code:
    $value = $_REQUEST['v'];
    Otherwise, I can't see your attachment (it's still pending approval), so I could be mistaken what you're trying to do.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best example of what I want to do is done at TUAW. Check out their search, if you press Web and type in a search; it'll pull up aol with your search. That's pretty much what I want to do, but with drop down.

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not seeing anything fancy with their search :\ - I can click on TUAW or Web. Which essentially switches back and forth. Since you're using a dropdown, that takes care of it for you. Is there a specific effect that you're looking for? Or perhaps you just simply want to change the action attribute on the form based on which one they select?
    Code:
    <form id="my-form" action="/">
      <select id="my-select">
        <option value="/search-foo.php">Foo</option>
        <option value="/search-bar.php">Bar</option>
      </select>
    </form>
    <script>
    document.getElementById('my-select').onchange = function() {
      document.getElementById('my-form').action = this.value;
    };</script>

  5. #5
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    polvero - That's perfect! Now the only problem is trying to make the other programs take the hook. The two other programs use post as the method and WordPress (my main site) is using get. So now I gotta figure out how to make them both play nice. But you got me on the right path! THANK YOU!

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Flippin' Sweet. For a while there I was starting to lose it.

  7. #7
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so this is what I have so far:

    Code:
    <form id="searchform" method="get" action="/">
    				<div>
    					<select name="v" id="my-select">
    						<option value="" selected="selected">Site</option>
    						<option value="/addressbook/search.php">Contacts</option>
    						<option value="/cal/search_handler.php?advanced=0&keywords=">Calendar</option>
    					</select>
    					<input value="Search (press Enter)" onfocus="if(this.value == 'Search (press Enter)') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search (press Enter)';}" type="text" size="15" name="s" id="s" />
    				</div>
    			</form>
    			<script>document.getElementById('my-select').onchange = function() { document.getElementById('searchform').action = this.value; };</script>
    The problem is that the option value is being passed in the URL with the URL. I want to be able to tell the form that if someone was to select Calendar, they url would be http://sfdefender.local/cal/search_h...ed=0&keywords= so then whatever value was entered into the input field would be put after the keywords=.

  8. #8
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. then. onsubmit, go to the appropriate url.

    Code:
    var f = document.getElementById('searchform');
    var input = document.getElementById('my-select');
    f.onsubmit = function() {
      var url= '/cal/search/foo/bar/?keywords=' + input.value;
      location.href = url;
      return false;
    };

  9. #9
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, forgive my ignorance, you've been so helpful...but I'm not sure where to enter this? I think I somewhat understand the statement, like the first line is identifying the form, the second line identifies the selector, and then if a specific option is chosen, it should output
    Code:
    var url= '/cal/search/foo/bar/?keywords=' + input.value;
    in the URL. Do I use that chunk of code for each of the option values?

  10. #10
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the code basically says that when the form is submitted, it takes the url that you have, and appends the value from the input to the end of it.

  11. #11
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh ok! I get that; so now where do I stick it?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •