jQuery Site Search Engine Plugin Tipue Search - Download jQuery Site Search Engine Plugin - Tipue Search

Download jQuery Site Search Engine Plugin – Tipue Search

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Site Search Engine Plugin – Tipue Search, hope it will help you in programming stack.

jQuery Site Search Engine Plugin Tipue Search - Download jQuery Site Search Engine Plugin - Tipue Search
File Size: 74.2 KB
Views Total: 19641
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Tipue Search is a jQuery plugin for Site Search Engine that allows to search and get content form JSON data or a list of pages.

Available modes:

Basic Usage:

1. Create a search form with action attribute pointing to your search page.

view source
1 <form action="search.html">
2 <input type="text" name="q" id="tipue_search_input">
3 <input type="button" id="tipue_search_button" onclick="this.form.submit();">
4 </form>

2. Create the search page. Include jQuery library and jQuery Tipue Search plugin in the head of your page.

view source
1 <link rel="stylesheet" type="text/css" href="tipuesearch/tipuesearch.css">
2 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
3 <script type="text/javascript" src="tipuesearch/tipuesearch_set.js"></script>
4 <script type="text/javascript" src="tipuesearch/tipuesearch_content.js"></script>
5 <script type="text/javascript" src="tipuesearch/tipuesearch.js"></script>

3. Static mode uses site content stored in the tipuedrop_content.js file.

view source
01 var tipuesearch = {"pages": [
02      {"title": "Tipue Search, a site search engine jQuery plugin", "text": "Tipue Search is a site search engine jQuery plugin. Tipue Search is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Tipue Search is responsive and works on all reasonably modern browsers.", "tags": "JavaScript", "loc": "http://www.tipue.com/search"},
03      {"title": "Tipue Search Static mode demo", "text": "This is a demo of Tipue Search Static mode.", "tags": "", "loc": "http://www.tipue.com/search/demos/static"},
04      {"title": "Tipue Image Search demo", "text": "This is a demo of Tipue Image Search.", "tags": "", "loc": "http://www.tipue.com/search/demos/images"},
05      {"title": "Tipue Search docs", "text": "If you haven't already done so, download Tipue Search. Copy the tipuesearch folder to your site.", "tags": "documentation", "loc": "http://www.tipue.com/search/docs"},    
06      {"title": "Tipue drop, a search suggestion box jQuery plugin", "text": "Tipue drop is a search suggestion box jQuery plugin. Tipue drop is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Tipue drop is responsive and works on all reasonably modern browsers.", "tags": "JavaScript", "loc": "http://www.tipue.com/drop"},
07      {"title": "Tipue drop demo", "text": "Tipue drop demo. Tipue drop is a search suggestion box jQuery plugin.", "tags": "JavaScript", "loc": "http://www.tipue.com/drop/demo"},
08      {"title": "Support plans", "text": "Stuck? We offer a range of flexible support plans for our jQuery plugins.", "tags": "", "loc": "http://www.tipue.com/support"},
09      {"title": "About Tipue", "text": "Tipue is a small web development studio based in North London. We've been around for over a decade. We like Perl, MySQL and jQuery.", "tags": "", "loc": "http://www.tipue.com/about"}
10 ]};

4. Call the plugin with options.

view source
1 <script>
2 $(document).ready(function() {
3 $('#tipue_search_input').tipuesearch({
4 'show': 10
5 });
6 });
7 </script>

5. Available options.

view source
01 $('#tipue_search_input').tipuesearch({
02  
03 // The number of characters displayed before the search term in context, if showContext is true.
04 'contextBuffer': 60,
05  
06 // The minimum number of characters displayed if showContext is true.
07 'contextLength' : 60,
08  
09 // The starting position in the descriptive text before the search term is shown in context, if showContext is true.
10 'contextStart' : 90,
11  
12 // The number of results displayed.
13 'show': 7,
14  
15 // Results open in a new browser tab if set to true.
16 'newWindow': false,
17  
18 // The search term is shown in context in the descriptive text if set to true.
19 'showContext': true,
20  
21 // Shows related items
22 'showRelated' true,
23  
24 // The time taken for the search to complete is displayed in tenths of a second.
25 'showTime': true,
26  
27 // The URL is displayed in each search result if set to true.
28 'showURL': true,
29  
30 // The number of search results is displayed in the document title if set to true.
31 'showTitleCount': true,
32  
33 // The minimum length of characters in a search query.
34 'minimumLength'  : 3,
35  
36 // The number of words displayed in the descriptive text in the search results.
37 'descriptiveWords'   : 25,
38  
39 // Search terms are highlighted if set to true.
40 'highlightTerms' : true,
41  
42 // Every occurrence of search terms are highlighted if set to true.
43 'highlightEveryTerm' : false,
44  
45 // The mode for loading content.
46 // The value can be 'static', 'live' or 'json'.
47 'mode': 'static',
48  
49 // n Live mode, the element containing the descriptive text.
50 'liveDescription': '*',
51  
52 // In Live mode, the element containing the content to be searched.
53 'liveContent': '*',
54  
55 // The location for the JSON file if using JSON mode.
56 'contentLocation': 'tipuesearch/tipuesearch_content.json',
57  
58 // Debug mode
59 'debug' : false,
60  
source : jqueryscript.net

Related posts: