assignFAST - assignFAST Autocomplete Example

Overview

This Web Service was developed to support a javascript based autocomplete, although other uses are possible. This working example provides the javascript code and an overview using the jQuery autocomplete.

More possible features are shown on the assignFAST page. Gadgets using this are also available for the OCLC WorldShare Platform or other OpenSocial portals.

Example Implemenation

To view a live version of the implementation, please visit: http://experimental.worldcat.org/fast/assignfast/example/example.html

Required Scripts and Stylesheets

assignFASTGadget.js (Has useful but non-required functionality for assignFAST)
assignFASTExample.js (The current example implementation)
assignFASTComplete.js (The actual autocomplete call)
jquery-1.5.2.min.js (Other revisions should be fine)
jquery-ui.min.js
jquery-ui.css

Search Form HTML

An existing search form would need to be modified by adding a <div class="ui-widget"> .. </div> around it. For the example on this page, this is:

<h4>Your Search Box</h4>
<span id="exampleXtra"> </span>
<div class="ui-widget">
   <input id="examplebox"  type="text" size="60"></input>
</div>

The examplebox id can be an existing id in your interface.

The exampleXtra span was added to add additional output if needed. The assignFASTGadget.js also has a drop down list set up for facet selection, and a clear button function that might be useful.

Connecting assignFAST

The connecting javascript is in assignFASTExample.js. It is placed after assignFASTGadget.js to overwrite defaults.

The setUpPage() function is called from <body onload=.

//from assignFASTExample.js
function setUpPage() {
// connect the autoSubject to the input areas
    jQuery('#examplebox').autocomplete(	  {
          source: autoSubjectExample, 
          minLength: 1,
          select: function(event, ui) {
              jQuery('#exampleXtra').html("FAST ID <b>" + ui.item.idroot + "</b> Facet <b>"+ getTypeFromTag(ui.item.tag)+ "</b>");
          } //end select
      } 
   ).data( "autocomplete" )._renderItem = function( ul, item ) { formatSuggest(ul, item);};

}  //end setUpPage()

The source: autoSubjectExample tells the autocomplete function to get the data from the autoSubjectExample function, which in turns calls the assignFAST Web Service.

In the select: function, the exampleXtra text is rewritten with additional information returned with the selected heading. In this case, the fast number and facet are displayed.

The generic _renderItem of the jQuery.autocomplete function is overwritten to create a display that differentiates the See Also from the Authorized headings that are returned in the search. The version used for this example shows:

See Also Heading USE Authorized Heading

when a See Also heading is returned, or simply the

Authorized Heading

otherwise.

Calling the assignFAST Web Service

The source: autoSubjectExample calls the following function, which in turn calls the autoSubject function. This function is found in assignFASTComplete.js, and is a fairly typical function to create the assignFAST Web Service url, and handle the output.

Here, we just select the default index, and write a new function to choose what gets put into the input box after a heading is selected. In this case, the default "--" subfield separator is replaced by a "/".

//from assignFASTExample.js
/*  
    example style - simple reformatting
*/
function autoSubjectExample(request, response) {
  currentSuggestIndex = currentSuggestIndexDefault;
  autoSubject(request, response, exampleStyle);
}

/*
  For this example, replace the common subfield break of -- with  /
  */
  
function exampleStyle(res) {
  return res["auth"].replace("--","/"); 
}

Other Available Functionality

The assignFASTGadget.js has other functions that may be useful.

formatSuggest - reformats the autocomplete selection menu.
autoSubjectCommon - (for source:) using the authorized heading with no reformatting
autoSubjectBreaker - (for source:) for marcBreaker format, with the marc tag, indicators, and using {} diacritics
autoSubjectConnex -(for source:) for Connexion formatting, spaces surround the subfield indicators
getTypeFromTag - Translates the MARC tag to a Facet name
buildSelectLimitList- uses a table to make a drop down selection list for facets, relating them to the proper index

assignFAST Autocomplete Example

API Documentation