Tipue drop, a jQuery Apple-influenced search box

Tipue drop is a jQuery Apple-influenced search box. Compact and easy to include on your site, Tipue drop is free for both commercial and non-commercial use and released under the MIT License.

Download Tipue drop 1.1, including example

Installing Tipue drop

The download package includes a working example of Tipue drop, open index.html to try it.

Tipue drop is in the tipuedrop folder, and the following should be included in the <head> section of your page.

<head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script type="text/javascript" src="tipuedrop/tipuedrop_set.js"></script>
<script type="text/javascript" src="tipuedrop/tipuedrop_data.js"></script>
<link rel="stylesheet" type="text/css" href="tipuedrop/tipuedrop.css">

</head>

The first line loads the jQuery library using the Google Libraries API. You can host the jQuery library yourself if you're in an environment without internet access.

The remaining lines load the Tipue drop settings, data and CSS.

The Tipue drop jQuery file below should be included towards the end of your page.

<script type="text/javascript" src="tipuedrop/tipuedrop.js"></script>

</body>
</html>

Below is the HTML to display the search box.

<div>
<input type="text" id="tipue_drop_input" autocomplete="off">
</div>
<div id="tipue_drop_content"></div>

This example uses Tipue drop as a basic search, but you can use Tipue drop as a search suggestion drop-down by replacing the <div> tag surrounding <input> with a <form> tag.

There's more about this in the Tipue drop FAQ.

Tipue drop settings

The settings for Tipue drop are held in the tipuedrop_set.js file. Each setting is documented inside.

Tipue drop data

The tipuedrop object holds the page details to be searched.

var tipuedrop = {"pages": [
     {"title": "Tipue drop", "thumb": "img/drop.png", "text": "A jQuery Apple-influenced search box", "loc": "http://www.tipue.com/drop"},
     {"title": "Tipue Search", "thumb": "img/search.png", "text": "A jQuery site search engine, including features such as word replacement", "loc": "http://www.tipue.com/search"},
     {"title": "Tipue drop FAQ", "thumb": "img/drop.png", "text": "Frequently asked questions about Tipue drop", "loc": "http://www.tipue.com/help/drop/faq/"}
]};

Thumbnails should be 48 by 48 pixels.

What's next?

You may want to look at the Tipue drop FAQ.

And why not share?