Home
Products
Grids
Blog
Support
Donate
About
   

Tipue Search

Download   Demo
V. 7.1
Tipue Search. A site search jQuery plugin. It's free, open source and fast.
Tipue Search only needs a browser that supports jQuery. It doesn't need MySQL or similar, Tipue Search uses a JavaScript object for content.
Enter tipue or blog in the demo.

Tipue Search is free for both commercial and non-commercial use. It doesn't show advertising or branding.

Getting started

Copy the tipuesearch folder to your site. You should look at the demo included with Tipue Search.

You should first create a search page. The following should be included in the <head> section of your search page.

HTML
The first line loads normalize.css, a library that forces browsers to render elements more consistently. This is recommended, but optional. The second line loads jQuery.

The following lines load the content to be searched, the Tipue Search CSS, the Tipue Search options and finally the Tipue Search jQuery plugin.

The code below creates a search box, and can be anywhere on your page. Search results are displayed in the tipue_search_content div.

HTML
The site content is stored in the tipuesearch_content.js file. It contains the search data as a JavaScript object.
JS
Finally, you need to call the tipuesearch() method. Include this towards the end of the results page.
HTML
And that's it! Tipue Search is a powerful tool, and this is just the basics. If you're stuck, we offer a range of flexible support plans, including free.

Content for Tipue Search

The search data for Tipue Search is contained in the tipuesearch JavaScript object. Usually this is stored in the tipuesearch_content.js file, but it doesn't have to be.
JS
You can create a JavaScript object for your website with Beaty. After your site has been indexed copy the content into a new text file. Save this file as tipuesearch_content.js.

If build your content by hand, note that the last record doesn't end with a comma. Some characters may need to be escaped, such as " or \. These should be preceded with a backslash.

A JavaScript object has properties. These can be seen as variables attached to the object. Or you can see properties as fields in a database.

The tipuesearch object properties

title

The title of the page. This is a required value.

text

The content of the page. Obviously, the most searched tipuesearch object property. While hugely important, it isn't mandatory.

image

The url of an image that will display in the search result. This can be a full or partial url.

tags

Short, searched text values that don't display. Items should be separated by spaces.

note

Content that shows below the search result. Not a searched value.

url

The url of the page. Both a searched property and mandatory. This can be a full or partial url.

You can store the tipuesearch JavaScript object in any file, or even not in a file. The Tipue Search script just has to have access to the tipuesearch object.

Creating a standalone search box

You can create a search box on a separate page from the search results. The form element should have an action attribue, the value being the location of your search results page.
HTML
You need to load Normalize.css and the Tipue Search CSS.
HTML
You can, of course, design your own search box. Below are the minimum values required. You won't need to load the Tipue Search CSS.
HTML

Using Tipue Search

Tipue Search is designed as a site search engine, so ease of use and familiarity is important. Tipue Search aims for a tight subset of Google Search.

The minus character before a word excludes all results that include the word. The plus character is ignored. Tipue Search use quotes, single or double, to search for an exact phrase.

Options

The options for Tipue Search are held in tipuesearch_set.js and also set as arguments in the tipuesearch() method.

Options in tipuesearch_set.js

Stop words are common words filtered out of the search query. These are held in tipuesearch_stop_words, a simple JavaScript array. Items should be lowercase.

Word replace is designed to replace frequently misspelled searches on your site. These are held in tipuesearch_replace as a JavaScript object.

JS
Words rather than phrases are replaced, so no spaces are allowed. Items should be lowercase.

You can bump the search weighting for each page in the tipuesearch_weight object, with plus and minus values allowed. The url value must be the same as the url value in your tipuesearch_content.js file.

JS
The tipuesearch_stem object allows the use of synonyms as well as the more traditional word stemming. If the word is found in the search query, the stem is silently added to the search.
JS
Words rather than phrases are included, so again no spaces and everything should be lowercase.

You can show related searches in the The tipuesearch_related object. These are search terms related to the search query. There's an optional property for include, this includes the search term in the search.

JS
Words rather than phrases are included, so again no spaces and everything should be lowercase.

Last but not least, tipuesearch_set.js contains a list of internal strings for multilingual support.

Options in the .tipuesearch() method

Other settings for Tipue Search are set as arguments in the tipuesearch() method.
HTML
contextBuffer

The number of characters displayed before the search term in context, if showContext is true. The default is 60.

contextLength

The minimum number of characters displayed if showContext is true. The default is 60.

contextStart

The starting position in the descriptive text before the search term is shown in context, if showContext is true. The default is 90 characters.

debug

The score for each search result is displayed if set to true. The default is false.

descriptiveWords

The number of words displayed in the descriptive text in the search search. The default is 25.

footerPages

The maximum number of page selections shown in the page footer. The default is 3.

highlightTerms

Search terms are highlighted when set to true. The default is true.

imageZoom

An image preview is displayed when images are clicked if set to true. Clicked images go to the result if set to false. The default is true.

minimumLength

The minimum length of characters in a search query. The default is 3.

newWindow

The search result opens in a new browser tab if set to true. The default is false.

show

The number of results displayed. The default is 10.

showContext

The search term is shown in context in the descriptive text if set to true. The default is true.

showRelated

Related searches are displayed when set to true. The default is true.

showTime

The time taken for the search to complete is displayed in tenths of a second. The default is true.

showTitleCount

The number of search results is displayed in the document title if set to true. The default is true.

showURL

The URL is displayed in each search result if set to true. The default is true.

wholeWords

Searches for whole words if set to true. The default is true. wholeWords is English language only. When using a language other than English, wholeWords should be set to false.

Tipue Search without a web server

Tipue Search will work happily without a web server. You will have to download jQuery and probably Normalize.css. You should use web safe fonts in the Tipue Search CSS file. Below is a minimalist search page.
HTML

Using HTML5 autocomplete

Tipue Search can be used with the HTML5 input list attribute and datalist element. Read our feature on Native HTML5 Autocomplete if the concept is new to you.

Add the list attribute to the Tipue Search input field and then create a datalist element. The list value should be the same as the datalist id selector.

HTML
The browser's inbuilt autocomplete is switched off via the autocomplete attribute. Remove this and the browser's autocomplete is displayed below the HTML5 autocomplete suggestions.

Limits of Tipue Search

JavaScript objects have a maximum size of 16GB. In some browsers, theres a limit of 65535 lines in a JavaScript file.

In real world use, people have used Tipue Search with several thousand of values.

Common issues

We come across a few common problems that are easy to miss.

The most common problem is incorrect installation. Check everything is in the right place using the included demo. The next most common issue is malformed content. Check the content in tipuesearch_content.js is valid at JSONLint or similar.

When using a language other than English, the wholeWords option should be set to false.

Browsers, jQuery, support and licensing

Tipue Search has wide browser support. It works with Chrome 49+, Edge 16+, IE10+, Firefox 58+, Safari 11+, iOS Safari 10.3+, Chrome for Android 66+, Samsung Internet 4+ and most recent browsers.

Tipue Search needs jQuery 2.2.4 or above. We recommend 3.x or above.

We offer a range of flexible support plans, including free.

Tipue Search is released under the MIT License. If you'd prefer commercial licensing contact us at post@tipue.com.