“Alternative Search Engines” – Forum Thread – Discuss

- waterbear
- 17 Aug 13, 4:02 am
- Comment #1

Hello everyone,

If, for any reason, you cannot use either of the search engine extensions available for Symphony (Search Index and ElasticSearch), or you wish to try other alternatives, here are two that I have found:

Swiftype

A JavaScript external service with the option to create a free account for small websites. A free plan includes: One search engine, 2 domains, 2,000 documents, and 50 query customizations. Recrawl once a week. Your search results must display Swiftype branding.

However, sometimes manual re-crawling is necessary which can leave your search engine not on par with the content of the site in question.

Tipue Search

Personally, my favourite. Taken from the site's description: Tipue Search is a site search engine jQuery plugin. It's open source and responsive.

There are three modes to use: live (the easiest to set up), static and JSON. Using JSON mode you can customise the results however you want. I've tested it and I confirm that it works.

- bzerangue
- 17 Aug 13, 8:09 am
- Comment #2

@waterbear - Thank you for posting this! Are you using Tipue Search with a Symphony installation? If so, are outputting your JSON with Symphony?

This would be cool to have as an extension.

- waterbear
- 17 Aug 13, 9:01 am
- Comment #3

@bzerangue - You're welcome! Yes, I tested the JSON mode on Symphony's default installation site. I wanted to attach a screenshot before... I'll try again.

To use JSON mode you'll need to create a search content page (besides an HTML search page--the official documentation tells you what to do) that outputs JSON. Mine looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:template match="/">{"pages": [<xsl:for-each select="data/homepage-articles/entry">
    {"title": "<xsl:value-of select="title"/>", "text": "<xsl:value-of select="body/*[position() = 1]"/>", "tags": "<xsl:value-of select="categories/item"/>", "loc": "http://localhost/symphony/articles/<xsl:value-of select="title/@handle"/>"},</xsl:for-each>
    {"title": "About", "text": "Symphony CMS is running off a freshly installed copy of Symphony CMS. Be sure to check back regularly as the site transforms from fresh prince to whizz-bang candy steak.", "tags": "about, faq", "loc": "http://localhost/symphony/about"}
]}
</xsl:template>

</xsl:stylesheet>

If you have any problems, I'll try to help.

Attachments:: tipue.jpg

- bzerangue
- 17 Aug 13, 9:44 am
- Comment #4

@waterbear - Thanks for sharing this! Very cool. I'll definitely try it out.

- bzerangue
- 17 Aug 13, 2:01 pm
- Comment #5

@waterbear - I can't get it to work. For some reason, I just get the content loading... javascript wheel... that's it. Could you share the rest of your page setup?

- waterbear
- 17 Aug 13, 8:53 pm
- Comment #6

Okay, here's what I did step by step:

Step 1:

Add the following to the master.xsl utility, inside the <head> section (it's just CSS):

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
<link href="{$workspace}/tipuesearch/tipuesearch.css" rel="stylesheet" />

Also add the search form somewhere in master.xsl utility:

<form action="http://localhost/symphony/search/">
<div style="float: left;"><input type="text" name="q" id="tipue_search_input" /></div>
<div style="float: left; margin-left: 13px;"><input type="button" id="tipue_search_button" onclick="this.form.submit();" /></div>
<div style="clear: left;"></div>
</form>

Notice where it says <form action="http://localhost/symphony/search/">. That's our search page.

Step 2:

Create a page called Search and make it hidden if you wish. For my own search page I created it like master.xsl to avoid intruison from other templates. Mine looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:import href="../utilities/page-title.xsl"/>
<xsl:import href="../utilities/navigation.xsl"/>
<xsl:import href="../utilities/date-time.xsl"/>

<xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:variable name="is-logged-in" select="/data/logged-in-author/author"/>

<xsl:template match="/">

    <html>
        <head>
            <title>Tipue Search Live Demo</title>
            <link rel="icon" type="images/png" href="{$workspace}/images/icons/bookmark.png" />
            <link rel="stylesheet" type="text/css" media="screen" href="{$workspace}/css/styles.css" />
            <link href="http://fonts.googleapis.com/css?family=Lato:300,400|Open+Sans:300,400" rel="stylesheet" type="text/css" />
            <link rel="stylesheet" type="text/css" href="{$workspace}/tipuesearch/tipuesearch.css" />
            &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">&lt;/script>
            &lt;script type="text/javascript" src="{$workspace}/tipuesearch/tipuesearch_set.js">&lt;/script>
            &lt;script type="text/javascript" src="{$workspace}/tipuesearch/tipuesearch.js">&lt;/script>

        </head>
        <body>
        <div id="masthead">
            <h1>
                <a href="{$root}"><xsl:value-of select="$website-name"/></a>
            </h1>
            <xsl:apply-templates select="data/navigation"/>
        </div>

        <div id="package">
            <p class="date">
                <xsl:call-template name="format-date">
                    <xsl:with-param name="date" select="$today"/>
                    <xsl:with-param name="format" select="'d'"/>
                </xsl:call-template>
                <span>
                    <xsl:call-template name="format-date">
                        <xsl:with-param name="date" select="$today"/>
                        <xsl:with-param name="format" select="'m'"/>
                    </xsl:call-template>
                </span>
            </p>

            <div id="content">
            <div class="block" style="padding-top: 31px;">

                <div style="float: left;"><input type="text" id="tipue_search_input" /></div>
                <div style="float: left; margin-left: 13px;"><input type="button" id="tipue_search_button" /></div>
                <div id="tipue_search_content"></div>

            </div>
            </div>

        </div>

        &lt;script>
        $(document).ready(function() {
             $('#tipue_search_input').tipuesearch({
                  'mode': 'json',
                  'contentLocation': 'http://localhost/symphony/search-content/'
             });
        });
        &lt;/script>

        </body>
    </html>

</xsl:template>

</xsl:stylesheet>

Make sure you include the Tipue files inside <head> as well as the correct path. The important part of this page is the jQuery at the bottom of the page:

&lt;script>
$(document).ready(function() {
     $('#tipue_search_input').tipuesearch({
          'mode': 'json',
          'contentLocation': 'http://localhost/symphony/search-content/'
     });
});
&lt;/script>

Notice where it says 'contentLocation': 'http://localhost/symphony/search-content/'. That's our JSON.

Step 3:

Create a page called Search Content, for example, and make it JSON (and hidden, optionally). Just like in the post before, mine looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:template match="/">{"pages": [<xsl:for-each select="data/homepage-articles/entry">
    {"title": "<xsl:value-of select="title"/>", "text": "<xsl:value-of select="body/*[position() = 1]"/>", "tags": "<xsl:value-of select="categories/item"/>", "loc": "http://localhost/symphony/articles/<xsl:value-of select="title/@handle"/>"},</xsl:for-each>
    {"title": "About", "text": "Symphony CMS is running off a freshly installed copy of Symphony CMS. Be sure to check back regularly as the site transforms from fresh prince to whizz-bang candy steak.", "tags": "about, faq", "loc": "http://localhost/symphony/about"}
]}
</xsl:template>

</xsl:stylesheet>

Step 4:

Try it again!

EDIT: Careful, the <script> tags have been converted to HTML special characters.

- jsoo
- 20 Jul 15, 6:55 am
- Comment #7

Nice tip, looks interesting.

Note that tipuesearch.js now uses "url" instead of "loc" as the name of the relevant item in the JSON "page" object, so your Search Content stylesheet needs that edit to work with the current version.

Symphony.

Alternative Search Engines

Search

Server Requirements

Symphony.

Alternative Search Engines

Search

You are looking at page 1 of 1

Server Requirements

Sign in