.png)
A fancy Apple.com-style search suggestion–JQUERY / PHP / MySQL
10:27 PM
1
Apple is known to create beautiful products (next to the needed functionality of course). I already wroteseveral 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, PHPfor 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.
HTML CODE
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4: <head>
5: <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
6: <title>Apple.com style suggestion search</title>
7: <link rel="stylesheet" type="text/css" href="css/style.css" />
8: <script type="text/javascript" src="http://www.google.com/jsapi"></script>
9: <script type="text/javascript" src="js/script.js"></script>
10: </head>
11: <body>
12: <div>
13: <form id="searchform">
14: <div>
15: What are you looking for? <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" />
16: </div>
17: <div id="suggestions"></div>
18: </form>
19: </div>
20: </body>
21: </html>
PHP CODE
1: <p id="searchresults">
2: <?php 3: // PHP5 Implementation - uses MySQLi.4: // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
5: $db = new mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
6: 7: if(!$db) {
8: // Show error if we cannot connect.
9: echo 'ERROR: Could not connect to the database.';
10: } else {
11: // Is there a posted query string?12: if(isset($_POST['queryString'])) {
13: $queryString = $db->real_escape_string($_POST['queryString']);
14: 15: // Is the string length greater than 0?16: if(strlen($queryString) >0) {
17: $query = $db->query("SELECT * FROM search s INNER JOIN categories c ON s.cat_id = c.cid WHERE name LIKE '%" . $queryString . "%' ORDER BY cat_id LIMIT 8");
18: 19: if($query) {
20: // While there are results loop through them - fetching an Object. 21: 22: // Store the category id 23: $catid = 0;24: while ($result = $query ->fetch_object()) {
25: if($result->cat_id != $catid) { // check if the category changed
26: echo '<span class="category">'.$result->cat_name.'</span>';
27: $catid = $result->cat_id; 28: }29: echo '<a href="'.$result->url.'">';
30: echo '<img src="search_images/'.$result->img.'" alt="" />';
31: 32: $name = $result->name;33: if(strlen($name) > 35) {
34: $name = substr($name, 0, 35) . "...";
35: } 36: echo '<span class="searchheading">'.$name.'</span>';
37: 38: $description = $result->desc;39: if(strlen($description) > 80) {
40: $description = substr($description, 0, 80) . "...";
41: } 42: 43: echo '<span>'.$description.'</span></a>';
44: }45: echo '<span class="seperator"><a href="http://www.marcofolio.net/sitemap.html" title="Sitemap">Nothing interesting here? Try the sitemap.</a></span><br class="break" />';
46: } else {
47: echo 'ERROR: There was a problem with the query.';
48: }49: } else {
50: // Dont do anything. 51: } // There is a queryString.52: } else {
53: echo 'There should be no direct access to this script!';
54: } 55: } 56: ?> 57: </p>
DATABASE TABELS
1: CREATE TABLE IF NOT EXISTS `categories` (
2: `cid` int(11) NOT NULL AUTO_INCREMENT,
3: `cat_name` varchar(255) NOT NULL,
4: `cat_url` text NOT NULL,
5: PRIMARY KEY (`cid`)
6: ); 7: 8: 9: 10: CREATE TABLE IF NOT EXISTS `search` (
11: `id` int(11) NOT NULL AUTO_INCREMENT,
12: `cat_id` int(11) NOT NULL,
13: `name` varchar(255) NOT NULL,
14: `img` varchar(255) NOT NULL,
15: `desc` text NOT NULL,
16: `url` text NOT NULL,
17: PRIMARY KEY (`id`)
18: ); 19: 20:
Add this widget to your website for $10. Please contact us : info@9pixle.com
