HTML Widget: How to Create an Advanced Search

    Introduction

    One of my users had the need to be able to perform "advanced search" queries within an internal resume space. The space will contain thousands of documents of all of our internal employee resumes, being able to effectively search them without having to master the Lucene search syntax brought about this HTML widget. This HTML widget uses jQuery, Javascript, Lucene search syntax, Lightbox_me, and HTML to build a simple container search with an advanced search option.

     

    Updates

    10/3/2012 - Uploaded beta_advanced_search_with_spotlight_version_5.0.4.js which is a version that should work in Jive version 5.0.4.

    10/10/2011 - Type ahead search now uses Jive's spotlight search for a much faster type ahead search experience. The HTML widget has been tested and slightly tweeked to work in version 5 of Jive. This version is also out of beta now and is attached as filename: advanced_search_with_spotlight_v3.5.html.zip

    6/9/2011 - Attached advanced_search_modal_v3.3beta.txt.zip which now allows for advanced searching by content type, and the quick search returns results as typed.

    6/2/2011 - The advanced search modal window now closes after searching. Updated version to advanced_search_modal_v3.2beta.txt.zip

    5/20/2011 - Released version 3.1 beta (advanced_search_modal_v3.1beta.txt.zip) which will attempt to auto detect the container type and container ID, also includes the ability to set the number of results. If for some reason it does not detect the container and containerType you can set the values with the tmp variables.

    5/12/2011 - Released version 3 beta (advanced_search_modal_v3beta.txt.zip) which will allow for results to display within the widget. Best if this is used within a wide column, but you can just cut and paste the results div to another HTML widget if you wish to have the search box in a narrow column, and the results in a wide column. I didnt put much effort in testing or polishing up this code, so let me know which version of Jive your using, browsers and your test results.

     

    Features

    • A simple search box that's limited to a specific container
    • An advanced search link and a link to the Jive provided search tips
    • A modal popup for advanced search based on the following criteria:
      • All of these words
      • Any of these words
      • The exact phrase
      • None of these words
      • Document Tags
    • The ability to string together one or more of the search parameters
    • A checkbox to search all of Jive using the advanced search screen
    • Version 3 allows inline search results and search results as you type

     

    advacned_search_screenshot.png

    Assumptions

    This document assumes that you have permission to create HTML widgets within a group, project or community. You can follow the instructions for Embedded Javascript and HTML widgets in order to change your permissions.

     

    This has been tested on Jive version 4.0.15, Jive 4.5.3, and Jive 5. Browsers tested on are IE6, IE7, IE8, Firefox 3.6, Safari, Chrome.

     

    Steps to Configure For Your Site

     

    Advanced Search v2:

    • Download one of the attached advanced_search_modal files
    • Figure out the Container Type and Container ID for your space.
      • Container type should be one of the following: Group = 700 or Project = 600 or community = 14
      • Container will be the unique ID of your group, community, or project. The easiest way to get this is to click on one of the actions for your container and grab the container id from your browsers URL.
    • Edit the downloaded text file in a text editor such as notepad
    • Search for the javascript comment "modify the container and container type variables here" and enter your values for the search_container and search_containerType variables.
    • Save the txt file, then copy all the code
    • Navigate to your container in Jive, create a new HTML widget, give it a title and paste the code into that widget.
    • That's it! This widget works best is a narrow layout.

     

    Advanced Search V3.x

    • Download one of the attached v3 advanced_search_modal files
    • Navigate to your container in Jive, create a new HTML widget, give it a title and paste the code into that widget.
    • That's it! This widget works best is a narrow layout. The javascript code uses Jive variables to figure out which container and container type the current group or space is. If for some reason it does not detect your container and container ID please type in manually the values for:

    var tmp_search_container = '2004';

    var tmp_search_containerType = '14';

     

    Reply to this document with any suggestions for improvements or any issues that you find.

     

    Acknowledgments