SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    Quake 1 Addict CreedFeed's Avatar
    Join Date
    Feb 2002
    Location
    Milwaukee, WI
    Posts
    296
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Amazon style search bar

    Can anyone explain how to develop a search box and filter box similar to how Amazon.com's new search box is styled? See the attachment to see an example of what I'm referring to. Basically in front of the search text box is a small filter option to search only within certain categories. If you click on the default option (All), an actual HTML select box appears just below the search box with all of your available options.

    By looking at the HTML code, I'm assuming this works by creating a div/span with the default searching option displayed in plain text. An HTML select box is also included but hidden by default. When you hover or click the div/span, the select box is displayed. When an option is selected in the select box, the div/span text is changed to the selected value and the select box is hidden again. Is that the idea?

    What would you call this? I've been searching Google to find samples of this and haven't found any similar examples of this. I don't really know what I should be searching for?

    Attachment: amazon-search.png
    -- Steve Caponetto
    Quake 1 Resurrection :: CreedFeed

  2. #2
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had the same question. The usability of that method will be a lot nicer on mobile phones. So I looked around in Firebug, and they're using a <select> element with opacity: 0; position: absolute; in the CSS. That select box is overlaid with some elements that have the appearance they wanted, and there's a little bit of JavaScript to update the text when the select box changes. They took this approach because it's not possible to show/hide a select box directly from JavaScript.

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Chennai
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Amazon style search box with jQuery & CSS

    Quote Originally Posted by CreedFeed View Post
    Can anyone explain how to develop a search box and filter box similar to how Amazon.com's new search box is styled? See the attachment to see an example of what I'm referring to. Basically in front of the search text box is a small filter option to search only within certain categories. If you click on the default option (All), an actual HTML select box appears just below the search box with all of your available options.

    By looking at the HTML code, I'm assuming this works by creating a div/span with the default searching option displayed in plain text. An HTML select box is also included but hidden by default. When you hover or click the div/span, the select box is displayed. When an option is selected in the select box, the div/span text is changed to the selected value and the select box is hidden again. Is that the idea?

    What would you call this? I've been searching Google to find samples of this and haven't found any similar examples of this. I don't really know what I should be searching for?

    Attachment: amazon-search.png

    Hi please check this out - Amazon style search box with jQuery & CSS - http://w3lessons.info/2013/08/08/ama...ng-jquery-css/

    THanks


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
  •