ScreenStepsAPI Examples HTML and Javascript WidgetsAdding a ScreenSteps Live Search widget to your site

Adding a ScreenSteps Live Search widget to your site

This lesson will show you how to add a ScreenSteps Live search widget to any site you like. There are a couple of requirements though:

1. You will need to have javascript enabled.

2. You will need include the jQuery javascript library (don't worry, we will show you how).

Reference Javascript File

Reference Javascript File

There are two javascript files that you will need to reference from your site:

1. jQuery

2. The ScreenSteps Live Javascript file

Include this code in your page somewhere:

<script src="//screenstepslive.com/javascripts/push/screenstepslive.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

NOTE: If your site is already using jQuery then you do not need to include it again.

Enter Settings

Enter Settings

You will want to enter some basic settings to get your widget up and running.

<script type="text/javascript" charset="utf-8">
	  ScreenStepsLiveSearchOptions = {
      domain: "youraccount.screenstepslive.com",
      space: "my_space",
      update_element: "search_results",
      username: "your_login",
      password: "your_password", 
      use_ssl: true
    }
</script>
  1. domain - Your ScreenSteps Live domain name.
  2. space - The id or permalink of your space.
  3. update_element - This is the id of the div where search results will be inserted into your web page (you'll see where to use this later in this lesson).
  4. username, password - We strongly recommend that you don't use an administrator user name and password here. Set up an api access user to use in your search widget.
  5. use_ssl - Only set "use_ssl" to true if your ScreenSteps Live account allows SSL access.

Create a Form

Create a Form

Now you need to create a form with a field where you can insert your search text. You can do this however your would like but the html below should work fine for you:

<form id="screenstepslive-search" action="">
  <p><input type="text" id="screenstepslive-search-field" value="" name="text"></input></p>
  <p><input type="submit" value="Search"></p>
</form>

Create a Div to Display Results

Create a Div to Display Results

Now add a section where your search results will be displayed. The id of the div needs to match the id you entered for the update_element above.

<h3>Search Results</h3>
<div id="search_results"></div>

Attach Search Function To Form

Attach Search Function To Form

Now we are going to use jQuery to attach the search functionality to the form.

jQuery.noConflict();
jQuery(document).ready(function($) {
  jQuery('#screenstepslive-search').submit(function(e){
    e.preventDefault();
    search_string = jQuery('#screenstepslive-search input#screenstepslive-search-field').val();
    SearchScreenStepsLiveSpace(search_string);
  })
});

In case you are interested we this is what we are doing:

  1. Putting jQuery into no conflict mode so it won't bother any other javascript libraries you might be using on your page.
  2. Waiting for the page to load and binding a function to the search form that will get triggered when the form is submitted.
  3. Preventing the default action of the form and getting the search string that the user entered.
  4. Calling the SearchScreenStepsLiveSpace function with the search string from the pervious step.

Search Away!

Search Away!

Here is an "unstyled" example of what the widget and search results will look like. You can style this to look however you would like.

0 Comments

Add your comment

E-Mail me when someone replies to this comment