Fancy Apple.com Style Search Suggestion

(No Ratings Yet)

Loading ...

948 views

Apple is known to create beautiful products (next to the needed functionality of course). I already wrote several articles on how you can transfer some amazing iPhone designs to your webbrowser, I own a MacBook Pro (which also looks pretty sleek) and many other products from Apple are well known for their amazing design.

The website from Apple isn’t less: The layout is simple yet beautiful. Yet, one of the most awesome things about the website is the search functionality. It gives you suggestions (with images) about the several products they offer, making it really user-friendly.

Today, we’re trying to recreate the effect from that website by creating a fancy apple.com-style search suggestion. Make sure you check out the demo (or visit Apple.com) to see this awesome effect work.

This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.

IMPORTANT NOTE:
As you can see, the demo is located on another server. The reason for this is, that every time a user presses on his keyboard, a call is made to the MySQL database. When loads of users do loads of calls (at the same time), this could result in slowing down the database. The answer for this would that the results should be cached – Something that isn’t implemented right now.

Safari, Chrome and Opera are currently the only webbrowsers that support the drop shadow effect around the the search results. Other browsers will simply display the results without the drop shadow.

This technique would be great if it were converted to a plugin for a CMS (WordPress/Joomla/Drupal etc.), but also just very cool to have on your website.

The SQL dump looks like this:

CREATE TABLE IF NOT EXISTS `categories` (
  `cid` int(11) NOT NULL AUTO_INCREMENT,
  `cat_name` varchar(255) NOT NULL,
  `cat_url` text NOT NULL,
  PRIMARY KEY (`cid`)
);

CREATE TABLE IF NOT EXISTS `search` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `cat_id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `img` varchar(255) NOT NULL,
  `desc` text NOT NULL,
  `url` text NOT NULL,
  PRIMARY KEY (`id`)
);

I assume the names of the columns are pretty straight forward. You’ll need to fill in the data yourself (in the download, you can find all the INSERTS that can be found in the demo). Also, take note of the AUTO_INCREMENT from both id’s.

Now that we have the data stored, we’ll need a front-end to place the data in. On to the next part!
HTML:
The HTML from the page isn’t the spectecular: It simply holds one form element with an input box. Take note that no action is defined to the form. If you actually want to pass the data to the search page, you should add it. Also, no input-submit was added.

  <div>
   <form id="searchform">
      <div>
         What are you looking for? <input type="text" size="30" value="" />
      </div>
      <div id="suggestions"></div>
   </form>
</div>

More interesting in the code above, is the (empty) divider with an id suggestions. We’ll fill up this divider later on with jQuery to place the actual found search results in.
Search results

Even more interesting is the searchresults that we’re going to display. Here’s the HTML, I’ll explain it below.

 <p id="searchresults">
   <span class="category">[CATEGORY_FROM_DATABASE]</span>
      <a href="[URL_FROM_DATABASE]">
         <img alt="" src="search_images/[IMG_FROM_DATABASE]"/>
         <span class="searchheading">[HEADING_FROM_DATABASE]</span>
         <span>[TEXT_FROM_DATABASE]</span>
      </a>
      <a href="[URL_FROM_DATABASE]">
         <img alt="" src="search_images/[IMG_FROM_DATABASE]"/>
         <span class="searchheading">[HEADING_FROM_DATABASE]</span>
         <span>[TEXT_FROM_DATABASE]</span>
      </a>
      <!-- more items -->
   <span class="category">Webdesign</span>
      <a href="[URL_FROM_DATABASE]">
         <img alt="" src="search_images/[IMG_FROM_DATABASE]"/>
         <span class="searchheading">[HEADING_FROM_DATABASE]</span>
         <span>[TEXT_FROM_DATABASE]</span>
      </a>
   <!-- more categories -->
   <span class="seperator">
      <a href="http://www.marcofolio.net/sitemap.html">Nothing interesting here? Try the sitemap.</a>
   </span>
</p>

* #searchresults – Main container to place the search results in.
* .category – When a new category is displayed, simply use this span to differ it from the actual links.
* .seperator – This is used at the bottom of the suggestion, linking to another page (in this case: the sitemap).
* As you can expect, all values between the [] and written in capitals needs to be data from the database.

On to some CSS styling and make it look a lot more pretty!

CSS:
First, we’ll fancy-up the page (looks pretty boring now, right?). I used the same background as in the polaroid viewer (hey, it looks pretty nice) and wrote the following CSS.

  /* HTML ELEMENTS */
body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
   background-color:#efefef; background-image:url(../images/bg.jpg); }

/* SEARCH FORM */
#searchform { margin:50px 200px; font-size:18px; }
#searchform div { color:#eeeeee; }
#searchform div input { font-size:18px; padding:5px; width:320px; }
#suggestions{ position: relative; left:235px; width:320px; display:none; }

Nothing really fancy going on over here, except for the #suggestions. As you can see, the display is set to none. Like I said, we’ll fill that container using jQuery but we’ll also show it (fade it in) using the javascript framework. We’ll get to that later.

Demo: http://qpoit.com/marcofolio_demo/apple_search/
Download: http://downloads.marcofolio.net/programming/webdesign/apple.com-style_suggestion_search.zip
Source: http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html