A fancy Apple.com-style search suggestion http://www.marcofolio.net Sat, 21 Nov 2009 07:09:13 +0100 FeedCreator 1.7.2 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5001 Hey Marco, Looks cool man =). Too bad you couldn\'t implement a little timeout on the query to prevent overloading of your server. But it looks like a really cool custom suggestion box! Also. Have you thought about giving results in JSON? So you could do the DOM manipulation in Javascript? Would make smaller responses and might be slightly quicker for your users. As always, a nice inspiring post Marco! Gaya Thu, 02 Apr 2009 09:30:47 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5003 Hi Gaya! Thanks for your comment ;) ! Yeah - Didn\'t implement the timeout. This article (just like many others here) just show the \"Proof of Concept\", not fully optimized etc. If ever anyone will convert this to a plugin/use it on a website, they do need to remember that caching prevents overloading the database - that\'s why I added it. I\'ve never messed around with creating JSON, so I can\'t tell with experience which one is better. I\'ll make sure to to this in the future! Greetings,,, Marco Thu, 02 Apr 2009 09:51:02 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5005 There is a plugin for Joomla that does the same: [url=http://tools.yootheme.com/extensions/yoosearch]YooSearch[/url] It\'s a pitty it is payware.. Sonny Thu, 02 Apr 2009 11:30:34 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5009 Adding my $0.02 in this Grandeurcentered talk. I totally agree with Gaya in that this thing is neat as can be. Also agree that it might be even better if you\'d used xml, json or any other structured dataformat for that matter. The purpose of a webservice is providing a language- and platform independent interface for your application. By having it return HTML you\'re basically limiting it\'s use to a webbased application. While i\'m at it, it would be so cash if this thing enabled you to use the arrowkeys to navigate through the results, and having the returnkey bring you to that particullar article. Anyhow, be sure to keep up the good work! Jape Thu, 02 Apr 2009 11:47:10 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5010 Hi Sonny! I wasn\'t aware of that - thanks for letting me know. Now other people that want to support the real (free) open source community now can convert my variation to a free extension ;) . Marco Thu, 02 Apr 2009 11:47:14 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5011 Hiya Jape! Thanks for your input ;) . Yeah - you\'re totally right. It just wan\'t my intension to turn this into a webservice of some kind - Just webbased would do the trick. But indeed; If XML was outputted, it could be used in other applications (although it would also create loads of data load since every time a user presses \"down\", another webservice call is made). I was also thinking about the \"arrows\" functionality (Apple [b]does[/b] have that working), so I might give it another shot in the future. Greetings,,, Marco Thu, 02 Apr 2009 12:02:24 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5012 I think the same webservice call would suffice. It\'s just a bit of presentationlogic that would have to be added i guess Jape Thu, 02 Apr 2009 12:40:39 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5015 This is very slick!! I\'m really interested in incorporating it to my site. I\'m using something similar though. As for the timeout idea, I put in a minimum of three characters before executing the query. I wonder if using something like \"hover intent\" (jQuery plugin) could be used. But would that affect users who do not wait for search suggestions and just click [return]? chris Thu, 02 Apr 2009 17:19:07 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5022 Thanks Chris! It called \"fancy\" for a reason ;) . The minimum of three characters would indeed help (a lot), especially when you have loads and loads of articles (or products) in your database. The \"hover intent\" jQuery plugin could also help - Only when the user \"stops writing\" for a couple of milliseconds, the call to the database would be made. There is one problem when using this - How to determine the time? Some people type fast and don\'t ever see the \"suggestion\". Some are really slow, but don\'t actually need it. As you see (and like others already said), much room for improvement in this script ;) ! Marco Thu, 02 Apr 2009 18:26:58 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5029 Adding functionality to the keys would be a nice addition indeed. Jape thanks for agreeing on the response thing. It\'s so good Grandeur still lives in all of our hearts =D Gaya Fri, 03 Apr 2009 09:50:52 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5085 nice job, great tut tanie strony internetowe Mon, 06 Apr 2009 14:06:52 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5097 Great article, but it\'s missing one crucial function compared to Apple\'s: it\'s not keyboard accessibility. Apple\'s search allows you to walk through the list using the up and down keys on the keyboard. Aside from that this is a pretty good rebuild of Apple\'s search. Simon Mon, 06 Apr 2009 19:09:56 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5105 Yup, you\'re absolutely right. As you can see in the comments above, that could be implemented for future use (along with loads of other improvements). I might give it another shot sometime and make sure to add that (superb) functionality to this script. Marco Mon, 06 Apr 2009 19:21:04 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5115 Hey Buddy, Apply style search is really cool man. Though I program on jQuery, it sometimes feels good to get some already coded program. In my site, on the music section http://praisedlight.com/music.html, I am trying to implement this feature, currently I am in the process of generating the metadata for search and I have just used your data/table to show results.But my music search should be ready in a day or two. Thanks for sharing your code. Also let me know if you have any suggestion to my website in terms of layout/color/content. Its my personal blog website! Pradeep Mon, 06 Apr 2009 19:51:31 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5145 :evil: wow! I love autosuggest always! :woohoo: lawrence77 Tue, 07 Apr 2009 22:55:10 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5176 Reallly excited to find something like this, and I\'m dead pleased with with amount of work that has gone into building this free script. However, I\'m having some issues with overlaying the results box. Right now it just pushes the rest of my content down the page, however, I was hoping to have it overlay over the top of my existing content, I can\'t but think this is a must-have feature. If anyone can assist, that would be great! Chris Thu, 09 Apr 2009 16:43:18 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5177 I\'m not sure if you guys have experience with Careerjet Search Box (http://www.careerjet.ca/partners/searchbox.html), am I able to integrate this? I want to use their data but use this search box. Any thoughts? Thanks Eugene Gregorio Thu, 09 Apr 2009 18:16:08 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5184 Very cool. It would be nice to see the \"press down\" functionality, as someone else mentioned. Loads of progress made here, well done! =) Cheers, Jason R. Jason Robb Fri, 10 Apr 2009 15:59:30 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5219 I do not get off screen anymore till this thang is working ;) Thomas Wed, 15 Apr 2009 22:20:24 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5226 Hi Eugene, Looking at that page, it would be pretty complex (but of course not impossible) to achieve something that you want. Once I have a little bit more time, I might want to give it a shot! Greetings,,, Marco Thu, 16 Apr 2009 08:00:14 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5227 Hiya Chris, Thanks for your comment and your nice words. You\'re totally right: It indeed should \"float\" over your current content. To do so, add the following CSS to the search results: [quote]position:absolute[/quote] Now you still need to position it a bit, but it should pop up on the top. Good luck! Marco Thu, 16 Apr 2009 08:02:42 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5265 [quote=Gaya]Hey Marco, Looks cool man =). Too bad you couldn\'t implement a little timeout on the query to prevent overloading of your server. But it looks like a really cool custom suggestion box! Also. Have you thought about giving results in JSON? So you could do the DOM manipulation in Javascript? Would make smaller responses and might be slightly quicker for your users. As always, a nice inspiring post Marco![/quote] Fri, 17 Apr 2009 22:46:26 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5284 How to make search conducted in Cyrillic? :!: :!: :!: :!: :!: :!: :!: :!: :!: :!: :( Perhaps a need! Andriy Sun, 19 Apr 2009 09:18:03 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5345 i was thinking of implementing this on a site im working on but i dont understand how it displays the images. (im not that big of a developer) mamjed Wed, 22 Apr 2009 00:00:49 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5347 Hiya Mamjed, - A reference is made in the database (table: \"search\", column \"img\" ). The image name is there (something like \"search.png\" ). - When the PHP retrieves the data from the database, it echos the images too. - The real images are stored in the \"search_images\" folder Hope that makes it a little bit more clear - good luck! Marco Wed, 22 Apr 2009 07:59:43 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5407 Thanks for sharing your development man, it really helped me, a lot. Thanks again, keep up the excellent work /mega thumbs up Alexander Thu, 23 Apr 2009 16:22:38 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5640 Dude, this is really awesome, nothing else to say. Something like this built on a platform like Wordpress would be simply amazing. How difficult do you reckon it could be to bring your full concept into wordpress? I\'m really curious! Thanks anyway for showing this, keep up the good work Salvatore Wed, 29 Apr 2009 01:27:09 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5648 Hi Salvatore, Thanks for your compliment! I don\'t know how to tranfer this full concept to WordPress, since I\'m not familiar with the CMS (I\'m a Joomla! guy ;) ). I\'ve already heard from WP developers they\'re working on tranferring this concept to the WP platform. I\'ll change this article when the plugin goes live! Marco Wed, 29 Apr 2009 08:40:27 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5741 Hi there, I\'ve been trying to get this script to work, but my host doesn\'t support mysqli. Do you know of a simple way to get this to work without mysqli? Cheers! Jørgen Thu, 30 Apr 2009 21:45:48 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc5792 When MySQLi isn\'t enabled, I assume that your host is running PHP4? You really should ask for an upgrade ;) . Anyway, if you can\'t upgrade to PHP5, you\'ll need to use the PHP4 MySQL connector and loop to the \"fetched results\". Simply search on Google to retrieve the desired information from the database to achieve the same results. Good luck! Marco Fri, 01 May 2009 10:46:56 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6073 I manage to get it to work without using mysqli. it needs a little bit of editing but it works perfectly. One problem is the dropdown does not appear when the page is secured (https). Any ideas????????? Xaga Fri, 15 May 2009 23:19:54 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6075 Well done Xaga - you might want to share your changes with the rest of us. As for the \"https\" version, I don\'t know why it doesn\'t work. Does any JavaScript work? If not, it might be because jQuery is called from Google, which is not over https. Try including the jQuery yourself and give it another go! Marco Sat, 16 May 2009 09:32:07 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6076 I\'m glad so many people liked this post! Hope to see this script used somewhere else on the web ;) . Marco Sat, 16 May 2009 09:54:05 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6247 \'ello, I\'m having a fight with this script at the moment, though I\'ve got it working all correctly, I\'m trying to deploy it over the top of some flash, but I\' not getting anywhere fast - it works great in most browsers, but IE7 is giving me a real headache, if anyone knows how I could fix this, please help! Chris Thu, 21 May 2009 10:46:05 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6251 Placing a DOM object on top of a Flash object is hard - I don\'t know if it\'s possible. You could try setting the z-index inside the CSS to 999 to make sure to place it \"on top\". What\'s happening in IE7? Marco Thu, 21 May 2009 11:51:43 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6524 HI, i´m design new layout for my blog and i want try this \"search\" in blog (blogger) but i can´t used , please you help me? Rafael Wed, 27 May 2009 17:45:53 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6540 Hi Rafael, I\'m glad you enjoyed the script. Probably, you can\'t use this search on Blogger since you\'ll need to control your own FTP/MySQL to get this technique to work. Blogger is a (free) blogging platform, which doesn\'t allow this. Greetings,,, Marco Wed, 27 May 2009 19:52:47 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6735 Any tips on what the best approach would be limit database queries for a larger database? Any code samples? I implemented your idea and it works great but it is a bit slow. Thanks for the helpful tutorial. Interesting Fri, 29 May 2009 23:29:58 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6768 it\'s so cool. thank you so much for sharing. eric Sat, 30 May 2009 09:36:08 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc6961 Thanks aprecciate ! Rafael Mon, 01 Jun 2009 18:13:58 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7005 Hey Marco, Thnxs for the amazing script. I modified it so it works with my database. It now searches trough our project names or projectplaces. I replaced the images with small pictures of the project and I categorize the results on project place. Great job and keep up the good work! Ruud Wed, 03 Jun 2009 12:26:13 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7008 Hi Ruud, I\'m glad you liked my script and modified it in such a way so that it\'ll suit your needs. That\'s what I really like to see! I visited your website, but can\'t see the implementation of this script there. I really am wondering how it looks like - do you have it online somewhere? Greetings, Marco Marco Wed, 03 Jun 2009 13:35:48 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7014 At the moment am I working on the website of Thunnissen Groep. This part of the project will be released next week. So check www.thunnissen.nl at the end of next week and look under [b]project[/b]. There you will find a searchbox with the implementation of this script. Ruud Wed, 03 Jun 2009 16:41:49 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7078 Hey Marco, I have a question and I hope you can help me with it. How can I post a second value to the rpc.php? I need to make some sql filters for the search, so I thought with a hidden input field to post the data to rpc.php. So I have this field: and I modified the jquery.search.js to this: function lookup(inputString, [b]proj[/b]) { if(inputString.length == 0) { $(\'#suggestions\').fadeOut(); // Hide the suggestions box } else { $.post(\"rpc.php\", {queryString: \"\"+inputString+\"\"[b], queryProj: \"\"+proj+\"\"[/b] }, function(data) { // Do an AJAX call $(\'#suggestions\').fadeIn(); // Show the suggestions box $(\'#suggestions\').html(data); // Fill the suggestions box }); } } But I don\'t get the data in rpc.php (where I catch it this way: $proj = $_POST[\'queryProj\']; ) Do you have any idea how I fix this? Ruud Fri, 05 Jun 2009 09:23:21 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7079 Hi Ruud, Strange, your code seems valid. Could you please contact me using the contact form so we can discuss this problem a little bit more? Otherwise we\'ll have a big conversation on this page :P . Greetings,,, Marco Fri, 05 Jun 2009 09:32:10 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7272 hi I added \"position:absolute\" to searchresults, it works fine but am facing other prob. now, as results once come up they don\'t hide by itself. can anyone help ? thanks Anuj Mon, 08 Jun 2009 09:38:11 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7486 Hey - I noticed when using the search the other day that the suggestions box pushes all the other content on your web page down (text, etc) so that there is enough space for the suggestions box. How can I make it possible for the suggestions box to fit on top of all the content therefore not increasing the page length by moving the content down. The Apple website does this beautifully and wondered if anybody could help with this. Thanks Christopher Sladdin Fri, 12 Jun 2009 09:34:10 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7535 Great work! I would love to use this in my osCommerce website but don\'t have the skills to apply this. Did someone manage to use this together with [url=http://www.oscommerce.com/]osCommerce[/url]? Arko Sat, 13 Jun 2009 18:44:12 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7732 I\'ll probably try to create a snippet for modxcms using you\'re code as a base. Great plugin! lossendae Wed, 17 Jun 2009 12:37:31 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7816 Hi Marco - This is great, i love it and will steal with pride! I just wanted to say thanks for your efferts.. This is an awesome bit of code looking forward to more! Cheers Ben Ben Thu, 18 Jun 2009 18:52:39 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7849 Thanks for your compliment Ben ;) . It\'s placed online to \"steal\", so feel free to implement it where you want! Good luck :) Marco Fri, 19 Jun 2009 08:26:39 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7919 [quote=Jape]Adding my $0.02 in this Grandeurcentered talk. I totally agree with Gaya in that this thing is neat as can be. Also agree that it might be even better if you\'d used xml, json or any other structured dataformat for that matter. The purpose of a webservice is providing a language- and platform independent interface for your application. By having it return HTML you\'re basically limiting it\'s use to a webbased application. While i\'m at it, it would be so cash if this thing enabled you to use the arrowkeys to navigate through the results, and having the returnkey bring you to that particullar article. Anyhow, be sure to keep up the good work![/quote][quote=Jape]Adding my $0.02 in this Grandeurcentered talk. I totally agree with Gaya in that this thing is neat as can be. Also agree that it might be even better if you\'d used xml, json or any other structured dataformat for that matter. The purpose of a webservice is providing a language- and platform independent interface for your application. By having it return HTML you\'re basically limiting it\'s use to a webbased application. While i\'m at it, it would be so cash if this thing enabled you to use the arrowkeys to navigate through the results, and having the returnkey bring you to that particullar article. Anyhow, be sure to keep up the good work![/quote] Mon, 22 Jun 2009 04:08:09 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7929 Well, I got it working on my site :) However, in Safari there\'s a white drop-shadow that appears below the dropdown box.. I can\'t find it in the CSS, how can I get rid of it? Cheers! Jørgen Jørgen Mon, 22 Jun 2009 12:21:45 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7930 Hi! As you can see in the article, the drop-shadow effect is injected using JavaScript. Simply open the [b]script.js[/b] file and change the \"box-shadow\" properties. Good luck! Marco Mon, 22 Jun 2009 14:19:17 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc7989 Haha, thanks! Must remember to always read the instructions.. :) Jørgen Wed, 24 Jun 2009 11:59:39 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc8268 Hi marco! This is great i love it. I have a question and I hope you can help me with it. How can implement the Arrow keys (up arrow & down arrow keyboard) navigation in to the div of results? Style Apple.com. Thanks! Vittorio Wed, 01 Jul 2009 17:39:41 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc8273 Hey Vittorio, I spent a long time, and i used javascritpt. It was pretty hard, but I still managed to do that, now it works perfectly! asd Wed, 01 Jul 2009 21:53:20 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc8309 Hi asd, an example please. Vittorio Thu, 02 Jul 2009 16:21:03 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc9494 hi marco, great job that u done. i have a problem with the sql he is shown me the error: atal error: Cannot instantiate non-existent class: mysqli in /home/www/web120/html/wp/wp-content/themes/wp_slider/search/rpc.php on line 5 have all user data in the php. thanks carsten carsten Fri, 31 Jul 2009 15:59:14 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc9496 Hello carsten, Thank you for those kind words. Which PHP version are you using? mysqli only works in PHP5 - PHP4 will give errors and you\'ll need to retrieve the data another way. Marco Fri, 31 Jul 2009 16:25:42 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc9497 Hello, our server is running php5. i think hes is not receive any data form the sql file. but i have filled all data out. thanks carsten carsten Fri, 31 Jul 2009 17:34:40 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc9508 Hello, Could you contact me through the Contact page so we can discuss this some further? Thanks! Marco Sat, 01 Aug 2009 02:07:35 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc9876 Thanks for sharing... Its a very helpful post for me. Mehedi Hasan Fri, 07 Aug 2009 07:36:53 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10140 Hi everyone, I\'ve edited the code to make it work with PHP4, but still retains it\'s OOP style. You can download the code from: http://ryanmcdonough.co.uk/applephp4.zip Or you can wait till Marco has reviewed the copy I sent to him to make sure there is no problems he can see with my changes and download it from him if you\'re dubious heh. Ryan McDonough Wed, 12 Aug 2009 12:45:30 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10159 Its nice & working :) Thanks. Learned a new style :D Sharif Thu, 13 Aug 2009 09:17:55 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10173 Hi Marco, I\'m still playing about with this feature and some other cool jquery effects for my site. In ther interest of not loading different versions of Jquery i\'ve noticed the following. http://www.google.com/jsapi - Referenceing this version of Jquery everything works great. http://code.jquery.com/jquery-latest.pack.js - Referencing this version, which i think should be the most current? there is a problem. When the user loses focus on the search box the suggestions still appear, which is not ideal. Like i said, its not ideal or effecient to load two versions of jquery - do you know of a fix? Many thanks Ben :lol: Ben Thu, 13 Aug 2009 19:16:04 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10217 Ah! I should do some reading first before posting... They both do different things: Get the necessary Ajax stuff required for your search feature. and this gets the latest Jquery library. Which allows your search feature to work but doesn\'t turn it off when you mouse out of the area.. Sorry for my confusion.. Still loving it BTW Ben Ben Fri, 14 Aug 2009 17:51:32 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10218 - Code part was removed - should read They both do different things: http://www.google.com/jsapi - Gets the necessary Ajax stuff required for your search feature. http://code.jquery.com/jquery-latest.pack.js - gets the latest Jquery library. Which also allows your search feature to work but doesn\'t turn it off when you mouse out of the area.. Sorry for my (double) confusion.. Ben Ben Fri, 14 Aug 2009 17:53:24 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10466 Great plugin! I adjusted the php code to pull in data from an xml file but I need a delay of some sort since it takes some time to get the actual xml file (1.2 seconds usually). I noticed some people talking about a delay above, did any one succeed in doing so? I tried timeout but that still sends all the queries. Is there any way to detect if the user is still typing? Pim Linders Sun, 30 Aug 2009 00:41:24 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10470 I was able to delay it using this var key_count_global = 0; var timer; // Global variable $(\"#inputString\").keyup(function(){ $(\'#suggestions\').fadeIn(); key_count_global++; clearTimeout(timer); timer = setTimeout(function(){ lookup() }, 800); }); works great! Pim linders Sun, 30 Aug 2009 05:20:42 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10532 Hi, the script is great! I\'m trying to implement it on my parents website. I have no prior knowledge of SQL so had to learn but got the search working. It works perfectly if I use the index file from the download (.com/apple/index.html) but as soon as I move the search box to my own web page (/index1.html), the search results don\'t line up with the search box and the css is being interfered with by my main stylesheet. Can anyone help? Much appreciated!! :) The test site is at www.southernchauffeurservices.com/index1.php Thanks! Shane Wed, 02 Sep 2009 17:03:16 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10657 Why use an inline function directly in the html when you can do it all simply and unobtrusively with jQuery? Either put an id on the text input and reference that directly with $(\"#yourId\").keyup(function() {}) or if you keep the html $(\"#searchform input:text\").keyup(function() {}) Marcus Fri, 04 Sep 2009 23:06:34 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10780 Looks really good, but I get it somehow not quite the run, at least not the way I imagine it Tim Sun, 06 Sep 2009 00:39:13 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc10850 Hey Pim: Can you tell me where exactly this code goes for those of us who are js challenged? Thx. Sam Mon, 07 Sep 2009 22:33:32 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc11065 Nice plugin, anyone got it working with Joomla 1.5? I know there is a plugin by Yootools, as mentioned by a previous user, but they use mootools, anything available for jQuery and Joomla. Any talented Joomla/jQuery people who may be thinking of porting, there will definitely be a market for this. Thanks Lee Wilson Mon, 14 Sep 2009 12:03:58 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc11343 Ok well when i first noticed that search results was pushing my other content down i added the following CSS to #searchresults Position:Absolute Z-index: 1 And it worked! Its just a tad bit slower.. Hope this Helps! Shane Walsh Fri, 25 Sep 2009 15:08:57 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc11344 also add Position:Absolute Z-index: 1 to #searchresults a:hover and there ya go! Shane Walsh Fri, 25 Sep 2009 15:17:43 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc11346 also if you find that you are getting slower reaction set what ever content it is that is being pushed and set its z-indez to -1 as someone else said here! Shane Walsh Fri, 25 Sep 2009 15:48:26 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc11366 I\'m using it on the site i\'m building http://www.bestsellprice.com you can look at custom.js to see how I implemented it. Pim Linders Fri, 25 Sep 2009 23:19:05 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc11587 Hi, I just want to now how bad is overloading of server with this search? Is there anybode how implemented this into website? Thanks Ivan S. Wed, 30 Sep 2009 19:30:56 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc11590 Just to correct myself: Is there anybody who implemented this into website? Ivan S. Wed, 30 Sep 2009 20:24:58 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc12590 This is awesome, thankyou! Simon Mon, 26 Oct 2009 11:58:12 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc12691 Any chance you\'ve added this functionality since April? chandlervdw Wed, 28 Oct 2009 17:03:40 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc12717 I already wrote a other article a while ago that does this - you\'ll need to combine it with this version. Check it out: [url=http://www.marcofolio.net/webdesign/advanced_keypress_navigation_with_jquery.html]Advanced keypress navigation with jQuery[/url]. Good luck! Marco Thu, 29 Oct 2009 08:54:19 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc12871 [quote=Marco]Hiya Chris, Thanks for your comment and your nice words. You\'re totally right: It indeed should "float" over your current content. To do so, add the following CSS to the search results: [quote]position:absolute[/quote] Now you still need to position it a bit, but it should pop up on the top. Good luck![/quote] chandlervdw Wed, 04 Nov 2009 19:10:00 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc13002 Marco, Thanks a lot for this amazing script. I\'m having troubles because the search box is hidden behind some flash content. I read your comment that it\'s hard to place a DOM object above flash. What if the entire screen is grayed out and made inactive while the user is searching? Will this hide the flash content? Brian Fri, 06 Nov 2009 19:47:20 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc13087 Thanks for providing a great starting point for my own implementation - now all I need to do is fix the CSS to get the box where I want it! Nick Jackson Mon, 09 Nov 2009 03:01:22 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc13144 \"Apple.com-style\" as if they invented this search as you type concept...hahaha, next time use more Apple lipstick. Steve is listening and all puckered up. :whistle: justintime Wed, 11 Nov 2009 01:33:39 +0100 http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html#josc13172 Obviously I implemented this, for a university I contracted with: http://www.ioe.mmu.ac.uk/cpd/ You can see it there, I\'m also going to implement this on a internal site, I maybe able to provide screenshots for that but not a link. Ryan McDonough Thu, 12 Nov 2009 10:21:30 +0100