WEB Search Box

Discussion in 'OT Technology' started by Style, Jul 5, 2008.

  1. Style

    Style Boioioioioioioioing

    Joined:
    Apr 29, 2005
    Messages:
    13,778
    Likes Received:
    0
    Location:
    Dubai
    I'm trying to do an (easy?) effect on my search box, in which I want to display the word "Search". When the user clicks in the search field, the word "Search" disappears. When the user clicks somewhere else on the page (provided he didn't write anything in the search box), the word "Search" reappears again.

    An example of this would be Apple's search function: www.apple.com

    How can you do this? I presume I would need JS? Is there another method to do it (say PHP)?

    thanks again.
     
  2. pkr

    pkr Guest

    Here, you can use mine:


    Code:
               
    <!-- Begin Search Box -->
                    <form id="searchbox" method="post" action="">
                               <input type="text" name="search" class="s" maxlength="128" value="Search for something..." onfocus="if(this.value=='Search for something...'){ this.value=''; } this.style.color='#00425D'" onblur="if(this.value=='Search for something...' || this.value==''){ this.style.color='#999999'; this.value='Search for something...'; }" onmouseover="this.style.color='#00425D';" onmouseout="if(this.value=='Search for something...'){ this.style.color='#99ABB2'; }" onkeydown="if(event.keyCode==13) searchGo();"><input type="button" value="Search" />
                           </form>
                <!-- End Search Box -->
    
    
    The CSS for the "s" class
    Code:
    #s {
        width: 142px;
        margin: 0 0 0 0;
        padding: 3px 5px 3px 22px;
        color: #99ABB2;
        font: 8pt arial, verdana, sans-serif;
        border: 1px solid #00425D;
        background: #FFFFFF url('../images/ico/search_glass.gif') no-repeat scroll center left;
    }
    That's with a search icon added to the input field btw :o
     
  3. Style

    Style Boioioioioioioioing

    Joined:
    Apr 29, 2005
    Messages:
    13,778
    Likes Received:
    0
    Location:
    Dubai
    Thanks bro, but I'm experiencing some problems. I didn't use yours, but found another code that I wanted. Your code will most probably gimme the same "error".

    You have to see it to understand. check this out: http://www.lightblu.com/blog

    See, I have the search function with AJAX feature, in which a pop up will show up as you type, and will narrow down as you type more words.

    Now when I have this feature on there (the word Search), well when the page loads, the popup will show up with "No Results" displayed (for theat word "Search"). When you click in the search box, the word and the popup disappear. Very annoying.

    So I guess I have to do it without it, unless you know a workaround :dunno:
     
  4. Divine Vengeance

    Divine Vengeance New Member

    Joined:
    May 21, 2003
    Messages:
    20,453
    Likes Received:
    0
    A half-assed, quick way to do it without modifying your ajax libraries would be to use two separate CSS classes, one for an empty text input and one for an active/in-use text input. Primary class displayed would just be a transparent image with the words "Search" posititioned at your leisure, and the second (in-use class) without the background image or highlighting. Then use either an AJAX DOM event handler or some other derivative to switch the backgrounds depending on the content of the text input or its blur/focus status.

    I wouldn't necessarily do it that way, but its an alternative you may want to consider.
     

Share This Page