Home WebriQ App Bar
Tool Bar
Webriq logo

© WebriQ

Free & Open Source (MIT)
Notifications
View All

Tipue Search

Tipue Search is a site search engine jQuery plugin. It's free, open source, responsive and fast.

Getting Started

If you haven't already done so, download Tipue Search and copy the tipuesearch folder to your site.

Tipue Search usually consists of two parts, the search box and the results page which displays the search results. To create a search box, the following should be included in the <head> section of your page.

Note: We don't own this "Tipue Search" plugin. For more information about this plugin please visit their website at www.tipue.com


link(href='tipuesearch/tipuesearch.css', rel='stylesheet')



<link href="tipuesearch/tipuesearch.css" rel="stylesheet">

This loads tipuesearch.css, the CSS for the search box. The following creates the search box. The form action attribute should point to your results page. 


form(action='search.html')
  input#tipue_search_input(type='text', name='q', autocomplete='off', required='')



<form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required>
</form>

Tipue Search uses various modes for loading content, and therefore has various results page structures. To get started we'll use Static mode, which can be used without a web server. Static mode uses site content stored in the tipuedrop_content.js file.

The following should be included in the <head> section of your results page. 


link(href='http://fonts.googleapis.com/css?family=Open+Sans:300,400', rel='stylesheet')
script(src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js')

script(src='tipuesearch/tipuesearch_content.js')
link(href='tipuesearch/tipuesearch.css', rel='stylesheet')
script(src='tipuesearch/tipuesearch_set.js')
script(src='tipuesearch/tipuesearch.min.js')


<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="tipuesearch/tipuesearch_content.js"></script>
<link href="tipuesearch/tipuesearch.css" rel="stylesheet">
<script src="tipuesearch/tipuesearch_set.js"></script>
<script src="tipuesearch/tipuesearch.min.js"></script>

The first line loads the Open Sans font from Google Web Fonts, which is optional. The second line loads jQuery via Google Hosted Libraries.

The remaining lines load the content to be searched, the Tipue Search CSS, the Tipue Search Options and the Tipue Search jQuery plugin.

The code below displays the search results. 


form(action='search.html')
  input#tipue_search_input(type='text', name='q', autocomplete='off', required='')
#tipue_search_content


<form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required>
</form>
<div id="tipue_search_content"></div>

JSON Mode

JSON mode uses JSON for site content. Your site has to be installed on a web server for JSON mode to work.

Call the .tipuesearch() method with the mode set to json and the name and location of your JSON file.


  $(document).ready(function() {
     $('#tipue_search_input').tipuesearch({
          'mode': 'json',
          'contentLocation': 'data/tipuesearch_content.json'
     });
  });

Markdown to JSON

To dynamically create a json file from your markdown file on our cms install the node package on your project.

npm install webriq-roots-markdown-to-json --save

Modify your app.coffee file to include the extension.

roots_markdown_to_json = require 'webriq-roots-markdown-to-json'

module.exports =
  extensions: [roots_markdown_to_json(options)]

Example


  roots_markdown_to_json(jsonoutput: "data", folder:['posts/**.md', 'page/**.md'])

Options

jsonoutput - output destination folder

folder - the directory location with .md files you would like to include, see example