|
SearchAsYouTypeInstallationGuide
OverviewThe new Search-as-you-Type (SayT) application allows you to add dynamic, real-time search to your Google Mini or Google Search Appliance. Your search box will dynamically present suggestions and auto-complete queries before the user is even done typing! In fact, we've architected it in such a way that you can use Search-as-you-Type on any text input field! We've also designed the project so you can get it up and running with sample data out of the box. Then you can later integrate it with your existing systems by hooking into a simple server side interface. System RequirementsSince the bulk of the logic is all encompassed in the provided javascript file (search-as-you-type.js), this project could easily be adapted to any web serving stack you already have in place. However to make it easier for you to visualize and implement a fully integrated solution, we've described the full setup including how to add the packaged XAMPP server side components if you don't have them. The following are required to get Search-As-You-Type installed and running against the provided sample data:
We've referenced an easy packaged installation process for these below. You can skip that section if you already have these available. Contents
Getting StartedTo get started with Search-As-You-Type just follow these simple steps:
Installation of Apache HTTP Server & PHPIf you don't already have Apache and PHP installed, then the XAMPP project makes it easy to get them installed and configured to run together. Here are the steps for Windows environments:
This setup is for development purposes only. You should take the necessary steps to security harden your installation of these components before pushing this to a production environment. More info about doing this is at http://www.apachefriends.org/en/xampp-windows.html#1221 The analogous steps for Linux environments are similar and are described in detail at http://www.apachefriends.org/en/xampp-linux.html#374. And the security hardening steps are described here: http://www.apachefriends.org/en/xampp-linux.html#381. Sample Data QueriesFirst be sure you've gone through all of the steps in the Getting Started section above. The sample data (test-data.txt) includes some sample information such as people and offices. You can add any type of information you might need such as conference rooms, glossary definitions, and other query suggestions. Be creative! Make sure your web server is running as was described in the installation section above. Now load http://localhost/sayt/test.html into your web browser. Try typing T into the search box to see the suggestions. Now type a 'u' and the word 'Tulsa' should autocomplete for you. Adding Search-As-You-Type to your Google Mini or Google Search Appliance Front EndFirst, create a new test front end. In this new test front end, search for the section titled: Search box input form and replace all the text in that section (i.e. up to the section titled Bottom search box) with the following: <xsl:template name="search_box">
<xsl:param name="type"/>
<form name="gs" method="GET" action="search">
<table border="0" cellpadding="0" cellspacing="0">
<xsl:if test="($egds_show_search_tabs != '0') and (($type = 'home') or ($type = 'std_top'))">
<tr><td>
<table cellpadding="4" cellspacing="0">
<tr><td>
<xsl:call-template name="desktop_tab"/>
</td></tr>
</table>
</td></tr>
</xsl:if>
<xsl:if test="($type = 'swr')">
<tr><td>
<table cellpadding="4" cellspacing="0">
<tr><td>
There were about <b><xsl:value-of select="RES/M"/></b> results for <b><xsl:value-of select="$space_normalized_query"/></b>.
<br/>
Use the search box below to search within these results.
</td></tr>
</table>
</td></tr>
</xsl:if>
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
<xsl:choose>
<xsl:when test="($egds_show_search_tabs != '0') and (($type = 'home') or ($type = 'std_top'))">
<font size="-1">
<xsl:choose>
<xsl:when test="($type = 'swr')">
<input type="text" id='q' name="as_q" size="{$search_box_size}" maxlength="256" value=""/>
<input type="hidden" name="q" value="{$qval}"/>
</xsl:when>
<xsl:otherwise>
<input type="text" id='q' name="q" size="{$search_box_size}" maxlength="256" value="{$space_normalized_query}"/>
</xsl:otherwise>
</xsl:choose>
</font>
</xsl:when>
<xsl:otherwise>
<font size="-1">
<xsl:choose>
<xsl:when test="($type = 'swr')">
<input type="text" name="as_q" size="{$search_box_size}" maxlength="256" value=""/>
<input type="hidden" name="q" value="{$qval}"/>
</xsl:when>
<xsl:otherwise>
<input type="text" name="q" size="{$search_box_size}" maxlength="256" value="{$space_normalized_query}"/>
</xsl:otherwise>
</xsl:choose>
</font>
</xsl:otherwise>
</xsl:choose>
</td>
<xsl:call-template name="collection_menu"/>
<td valign="middle">
<font size="-1">
<xsl:call-template name="nbsp"/>
<xsl:choose>
<xsl:when test="$choose_search_button = 'image'">
<input type="image" name="btnG" src="{$search_button_image_url}"
valign="bottom" width="60" height="26"
border="0" value="{$search_button_text}"/>
</xsl:when>
<xsl:otherwise>
<input type="submit" name="btnG" value="{$search_button_text}"/>
</xsl:otherwise>
</xsl:choose>
</font>
</td>
<td nowrap="1">
<font size="-2">
<xsl:if test="(/GSP/RES/M > 0) and ($show_swr_link != '0') and ($type = 'std_bottom')">
<xsl:call-template name="nbsp"/>
<xsl:call-template name="nbsp"/>
<a href="{$swr_search_url}">
<xsl:value-of select="$swr_search_anchor_text"/>
</a>
<br/>
</xsl:if>
<xsl:if test="$show_result_page_adv_link != '0'">
<xsl:call-template name="nbsp"/>
<xsl:call-template name="nbsp"/>
<a href="{$adv_search_url}">
<xsl:value-of select="$adv_search_anchor_text"/>
</a>
<br/>
</xsl:if>
<xsl:if test="$show_alerts_link != '0'">
<xsl:call-template name="nbsp"/>
<xsl:call-template name="nbsp"/>
<a href="{$alerts_url}">
<xsl:value-of select="$alerts_anchor_text"/>
</a>
<br/>
</xsl:if>
<xsl:if test="$show_result_page_help_link != '0'">
<xsl:call-template name="nbsp"/>
<xsl:call-template name="nbsp"/>
<a href="{$help_url}">
<xsl:value-of select="$search_help_anchor_text"/>
</a>
</xsl:if>
<br/>
</font>
</td>
</tr>
<xsl:if test="$show_secure_radio != '0'">
<tr>
<td colspan="2">
<font size="-1">Search:
<xsl:choose>
<xsl:when test="$access='p'">
<label><input type="radio" name="access" value="p" checked="checked" />public content</label>
</xsl:when>
<xsl:otherwise>
<label><input type="radio" name="access" value="p"/>public content</label>
</xsl:otherwise>
</xsl:choose>
<xsl:choose>
<xsl:when test="$access='a'">
<label><input type="radio" name="access" value="a" checked="checked" />public and secure content</label>
</xsl:when>
<xsl:otherwise>
<label><input type="radio" name="access" value="a"/>public and secure content</label>
</xsl:otherwise>
</xsl:choose>
</font>
</td>
</tr>
</xsl:if>
</table>
</td></tr>
</table>
<xsl:text>
</xsl:text>
<xsl:call-template name="form_params"/>
</form>
</xsl:template>Then search for the section titled: Utility function for constructing copyright text and replace all the text in that section (i.e. up to the section titled Utility functions for generating html entities) with the following: <xsl:template name="copyright">
<center>
<br/><br/>
<p>
<font face="arial,sans-serif" size="-1" color="#2f2f2f">
Powered by Google Search Appliance</font>
</p>
</center>
<script src='http://{YOUR_HOST_DIR}/search-as-you-type.js'></script>
<script>searchAsYouType.initialize(document.getElementById('q'), true);</script>
</xsl:template>Finally, replace the {YOUR_HOST_DIR} text above with the location and directory of your search-as-you-type directory/files. Now, once your test front end works, you can perform the same search and replace in your current front end stylesheet or custom front end stylesheet. Enjoy! Adding Search-As-You-Type to any other search field or input text field To any HTML text input field, add the following argument id='sayt'. For instance: <input id='sayt' type='input'> (If you already have an id, you can reuse that and change the 'sayt' field below.) And then, below this input field, add the following 2 lines of code: <script src='http://localhost/sayt/search-as-you-type.js'></script>
<script>searchAsYouType.initialize(document.getElementById('sayt'), true);</script>Please keep in mind that Internet Explorer doesn't allow you to put a <script> that modifies the DOM inside an open tag (e.g. a  Sign in to add a comment
|
at the end where it says to enter {YOUR_HOST_DIR} would i enter my domain name for example example.com or the file where they are store \username\