QueryTag
The simple, easy-to-implement jQuery plugin that allows you to add popular search queries from a Google Custom Search Engine (CSE) to your website as sortable, filterable, and stylable keyword tags.
Getting Started
Download and Setup
To use this plugin, include the jQuery, Isotope, and Isotope Packery-Mode libraries and the QueryTag.js plugin before the closing <body> tag of your HTML document:
<script src="jquery.js"></script>
<script src="isotope.pkgd.js"></script>
<script src="packery-mode.pkgd.js"></script>
<script src="querytag.js"></script>Install with Bower
$ bower install querytag.jsInstall with npm
$ npm install querytagDependencies
Required:
- jQuery (1.2.1+)
- Isotope (2.2.2+)
- Isotope-Packery (1.1.3+)
Optional / Theming:
Add-Ons:
Collapsible menu toggling using MenuAnimate, which includes 6 stylish navigation transformicons.
Usage
QueryTag.js was designed to blend aesthetically with the Bootstrap CSS framework and comes packaged with a default theme that looks great on both Bootstrap and non-Bootstrap websites.
Check out the complete API documentation
JavaScript
To use the export plugin, just call:
$("#grid").queryTag("USERID", "CSEID");Each Google Custom Search engine is identified by a unique ID created by combining a user ID USERID with a Custom Search engine ID CSEID, separated by a colon. You can find your unique search engine ID on the Basics tab of the Custom Search control panel. It should look something like this:
// USERID CSEID
011737558837375720776:mbfrjmyam1g
The Google Custom Search API allows you to retrieve popular search queries for five distinct time intervals:
overall, year, month, week, day
By default, QueryTag will generate option controls for all five views. You can define which views to render by supplying a String[] of views as the optional third parameter.
/* Default: all 5 views are rendered */
$("#grid").queryTag("USER-ID", "CSE-ID", ["overall", "year", "month", "week", "day"]);
$("#grid").queryTag("USER-ID", "CSE-ID"); // same as above
/* Only the "overall" and "month" views are rendered */
$("#grid").queryTag("USER-ID", "CSE-ID", ["overall", "month"]);Methods
.queryTag( USER-ID , CSE-ID [, views ] )Check out the complete list of available Methods
Events
Check out the table of custom Events and the interactive Demo 5: Events
Browser Support
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | ✓ | ✓ | ✓ | ✓ | ✓ |
| iOS | ✓ | ✓ | ✓ | ✓ | ✓ |
| Mac OSX | ✓ | ✓ | ✓ | ✓ | ✓ |
| Windows | ✓ | ✓ | ✓ | ✓ | ✓ |
Live Demo
Live, interactive demos:
Demo 1: Unstyled
Demo 2: Styled
Demo 3: Menu
Demo 4: Search
Demo 5: Events
License
QueryTag.js is licensed under the terms of the MIT License
Credits
- John Resig - jQuery
- Metafizzy - Isotope
