FoxyComplete — advanced autocomplete search with images

Default avatar.
May 24, 2012
foxycomplete autocomplete search with images

Today I am going to share a trendy functionality which I have been implementing in my projects for a while now. I call it FoxyComplete” and what is does is fetch clickable search results along with images either automatically scraped from the result’s content or a specified file. It’s easy to implement and once done, easy to tweak. The application of this functionality is purely dependent on the designer and developer preference but its impact on the user experience makes it a top choice to add in modern design and development projects. Business units where I have personally used this functionality are e‑commerce, corporate designs, photography, entertainment and future projects that demand a comprehensive search feature. I am pretty sure that you all have visited the IMDb and Apple websites and tried their search features. If not – below is a preview of what their advanced search functionality looks like. IMDB and Apple Websites type Search Feature with Images and Autocomplete Results We all know it can be done but then the question is, Why is it not usually done across all those beautifully crafted websites?” Well, I guess it’s probably a lack of a quick, open-to-all solution! When I implemented the same Autocomplete Search with Images over at my Photography Blog which I designed a while ago, it surely was tricky to achieve, but in the end it came out great. The visitors at my blog really enjoy searching through my image gallery and instantly get a preview of what they will be seeing next. Below is how the search feature at my blog looks. Pushpinder Bagga aka Foxybagga Photography Blog In this tutorial I am going to cover the below mentioned points 

  1. A brief overview of the script
  2. FoxyComplete as a Wordpress Plugin (Local /​Dynamic)
  3. Implementing FoxyComplete as a Youtube Search with Images
  4. Improving Security

For Wordpress Designers, it’s a piece of cake and for the Wordpress/​PHP Developers – it’s a big opportunity to explore its numerous functionalities and applications it has to offer. For advanced implementation, the requirements would be basic knowledge of Wordpress, PHP, HTML, jQuery and CSS.

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. Basic Demo of the Foxycomplete Search with Images 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 HTML and CSS Layout of the Foxycomplete Search with Images Result Div 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. Foxycomplete Search with Images as a Wordpress Plugin - Preview of Wordpress settings page.

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: 

  1. Media Uploads
  2. Thumbnail” Custom Field
  3. Images in the Post Content

Once it has all the data, it combines the title and respective content of each post/​page and searches for the queried item for a comprehensive search experience. Once found, let’s say X number of items — it pushes those X is to a JSON array, which is returned to the JavaScript functionality.

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. Gmail using foxycomplete with local data once the user is logged in. 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. Foxycomplete as a Youtube Search Engine 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);
//your search logic

That’s just one of numerous ways to secure it!


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

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…