blogin the demo.
Tipue Search is free for both commercial and non-commercial use. It doesn't show advertising or branding.
tipuesearchfolder 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.
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
tipuesearch()method. Include this towards the end of the results page.
tipuesearch_content.jsfile, but it doesn't have to be.
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
\. These should be preceded with a backslash.
The title of the page. This is a required value.
The content of the page. Obviously, the most searched tipuesearch object property. While hugely important, it isn't mandatory.
The url of an image that will display in the search result. This can be a full or partial url.
Short, searched text values that don't display. Items should be separated by spaces.
Content that shows below the search result. Not a searched value.
The url of the page. Both a searched property and mandatory. This can be a full or partial url.
formelement should have an
actionattribue, the value being the location of your search results page.
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.
tipuesearch_set.jsand also set as arguments in the
Word replace is designed to replace frequently misspelled searches on your site. These are held in
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_stemobject 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.
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.
Last but not least,
tipuesearch_set.js contains a list of internal strings for multilingual support.
The number of characters displayed before the search term in context, if showContext is true. The default is 60.
The minimum number of characters displayed if showContext is true. The default is 60.
The starting position in the descriptive text before the search term is shown in context, if showContext is true. The default is 90 characters.
The score for each search result is displayed if set to true. The default is false.
The number of words displayed in the descriptive text in the search search. The default is 25.
The maximum number of page selections shown in the page footer. The default is 3.
Search terms are highlighted when set to true. The default is true.
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.
The minimum length of characters in a search query. The default is 3.
The search result opens in a new browser tab if set to true. The default is false.
The number of results displayed. The default is 10.
The search term is shown in context in the descriptive text if set to true. The default is true.
Related searches are displayed when set to true. The default is true.
The time taken for the search to complete is displayed in tenths of a second. The default is true.
The number of search results is displayed in the document title if set to true. The default is true.
The URL is displayed in each search result if set to true. The default is true.
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.
datalistelement. Read our feature on Native HTML5 Autocomplete if the concept is new to you.
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.
autocompleteattribute. Remove this and the browser's autocomplete is displayed below the HTML5 autocomplete suggestions.
In real world use, people have used Tipue Search with several thousand of values.
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.
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.