FoxyComplete — advanced autocomplete search with images
- A brief overview of the script
- FoxyComplete as a Wordpress Plugin (Local / Dynamic)
- Implementing FoxyComplete as a Youtube Search with Images
- Improving Security
A brief overview of the script
Lets first quickly take a sneak peak to what what we will be creating in this tutorial. Please click the below image for a basic demo. Please bear in mind, I am keeping this tutorial to a very basic level to make sure everyone understands it and anyone can design or tweak it according to their requirements. The functionality that I have made was inspired from the jQuery Autocomplete Plugin by Jorn Zaefferer. The above quick example autocompletes the title of the result but we can also tweak it to redirect to a URL on select (done on the next section). The ID of the search field is kept as "s", which is the default used for WordPress Search Field (would be beneficial as we continue this concept further to develop a WordPress Plugin). Styling the results is easy: it’s made up of a clean structure that is easy to style according to your design..ac_results
-> .ac_results ul
-> .ac_results ul li
-> .ac_results ul li a
-> .ac_results ul li a img
and .ac_results ul li a span
This basic example uses a static data source which is a simple JavaScript file in which we have declared an array in JSON format. All our functionality does is to parse the array and display the results.
Don’t worry—it’s just an array with basic key and value pairs and nothing more than that. Our keys are the permalink to take us to the result page, image to preview, and the title in which we have to search the string. I have kept a default image and an example title for this basic demo.
Example array structure
[ {“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }, {“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }, {“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” } … Repeat as much as you want to ]The JavaScript functionality is easy. We just parse the resultant JSON Array in jQuery, format the results according to our requirements, and pass it display. Tip for the Developers: In-case you are looking to change how the results are displayed have a look at the function format() in the script foxycomplete.js. It’s a JavaScript function that takes an array as input and returns formatted HTML containing the elements of the array. Pretty basic to understand but if you are looking to change it—do it here!
FoxyComplete as a WordPress plugin (local/dynamic)
Click the below image to download the WordPress Plugin as a .zip file.For the designers
I hope you remember that I said it was supposed to be a piece of cake for designers, well, here it is! FoxyComplete as a Plug-n-Play Wordpress Plugin that works straight out of the box—just simple configuration is required for basic implementation. All you have to do is download it, install it, and play around while you design for it. The Plugin Options are as below: Enable Local Search: After browsing a few websites I found that their search option was incredibly fast – even with a huge database—example IMDB. The first thing that struck was their advanced fast servers—but what about the regular users that have shared hosting and varied amounts of data? That is why I made local search a priority option. It simply loads a JavaScript file in the footer of your WordPress installation containing an array to all your posts and pages along with their URLs and, if found, image previews. The plugin defaults to dynamic search although you can change it anytime to local search. Limit: One sure would need a control over the limit of the results displayed. It helps keep consistency with the design and allow users to get only the most relevant results. It defaults to five top relevant results. Width of the Autocomplete: Originally it was always kept equal to the input’s width but then I realized we were not searching on a Google-style wide search box. It still defaults to the input element's width but you can change it at any time. ID of the Input: Since it is a WordPress Plugin, I gave preference to "#s" as a default choice which can be changed to whatever you like. Just enter the ID (without the '#') of your desired input element and it’s a go. Default Image: Sometimes the plugin might not find a relevant image and for that I’ve included a demo image, but you have control over that, too: just replace it with your own sample image in the plugin directory. The Dynamic Search looks for relevant content intelligently and supplies a dynamic JSON array to the functionality immediately. First it collects all the posts and pages in the WordPress installation that are published and public. Then it searches the images in 3 steps from the content as:- Media Uploads
- "Thumbnail" Custom Field
- Images in the Post Content
Dynamic vs local functionality
This is a critical topic and I am open for a discussion in the comments section. I personally feel there is no harm giving those a local source if it enhances the experience by many folds. Another reason that I implemented the Local Search was because I found even Google implementing it in Gmail. Once the user logs in, Gmail sends a request to its server and fetches all the email addresses and names or aliases of all your contacts in the footer which are then used for the To, CC, BCC, and Labels autocomplete fields. What do you say, legitimate?Implementing FoxyComplete as a YouTube-like search with images
As mentioned above, there is a lot of functionality for developers, too. Above is what we did using YouTube feeds and then parsing them in PHP to give the required results in JSON format. You can learn about those here. Click the below image for a demo of the YouTube Foxycomplete Search. Another functionality you can make is the YouTube Search Engine with on-click play in modal or overlay. For example, when you search for a video and click it in the autocomplete results, it pops open a modal dialog box or an overlay with the video in it, playing on your website but sourced from YouTube. Nice, isn’t it?Improving security
Though the WordPress plugin is secure as I used WordPress Nounces, it can be made even secure by using constants in the dynamic version and encryption in the local. One security measure we used was to check for an Ajax call and then also check for an Ajax call from the same domain as shown below.//define SAME_DOMAIN to true in the Header of your document. define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'); define('DOING_AJAX', true); if(IS_AJAX && DOING_AJAX && SAME_DOMAIN) { //your search logic }That's just one of numerous ways to secure it!
Conclusion
So that was the FoxyComplete that could help you in a lot in your design and development projects in the future. This is Version 1.0 and I shall make sure to continue improving it with your valuable feedback and support. Let me know what you think in the comments section below and since this is hosted on an environment I can easily and regularly edit, with your super suggestions—lets make it a great free plugin with ultimate user experience at both ends.Pushpinder Bagga
Pushpinder Bagga works as an Interactive Developer with Web Design Australia. Follow him on twitter @tobcreatives.
Read Next
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
How to Write World-Beating Web Content
Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…
By Louise North
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
How Web Designers Can Stay Relevant in the Age of AI
The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…
By Louise North
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff