Creating a MarkLogic Search Widget

 

How to create a MarkLogic Search Widget?

Intro

Once a highly searchable MarkLogic data repository has been created, a common request is to provide a Search Widget. A search widget is a simple web search box that can be added to any web page. Users can then use the search box to submit a search request to the MarkLogic database.

The client side widget consists of HTML, CSS and JavaScript. The JavaScript calls a MarkLogic Rest API asynchronously. The MarkLogic Rest API processes the request and then sends the results back to the web page. Client side JavaScript receives the results and renders accordingly.

The search widget test page shown in this screen cast is on the following link.

http://www.garyrusso.org/blog/testpage1.htm

The screencast walks through the process of creating a MarkLogic Search Widget using the Roxy Framework.

The key topics discussed are:

1. Recap of the previous Roxy screencast.
2. Search Widget versus MarkLogic 6 Visual Widget
3. transform-results override – See config.xqy and snippet-lib.xqy
4. Add a new Search Controller using Roxy command line.
5. Cross Domain AJAX using JSONP
6. JSON Response
7. jQuery code used to send, receive and render.
8. Test Page

1. Recap

The previous screencast showed the Roxy two column and three column layouts. It also showed the time saving Roxy deployer tool.

A revised version of the original screencast web application shown in the following link.

Two- Column Layout – http://ps2.demo.marklogic.com:8090/

Be sure to use the “Open XML” link in the search results column to view the underlying XML fragment.

2. Search Widget versus MarkLogic 6 Visualization Widget

The screencast builds a fully featured search box widget using some jQuery code, HTML and CSS.

However, MarkLogic 6 comes with a few prebuilt visualization widgets. This is a good opportunity to mention the MarkLogic 6 Visualization Widgets.

You can see them in action here. http://ps2.demo.marklogic.com:8004/

Be sure to try the pie chart filters.

3. transform-results function override

The proper way to write custom snippet code is to override the transform-results function. The screencast shows the search option with the respective code. For more info, see Chapter 2 of the Search Developers Guide.

4. Add a new Search Controller using Roxy command line

Use the Roxy create command to create a new controller with the respective view code.

See the Roxy command line help for the details.

ml create –help

ml create controller –help

5. Cross Domain AJAX using JSONP

Cross Domain AJAX Requests can be a security risk and are restricted in most modern browsers. The secure work around is to wrap the JSON string into a JavaScipt function. This approach is called JSON-with-Padding or JSONP.

More details on JSONP is here. http://www.json-p.org/

6. JSON Response

The over-the-wire transport from MarkLogic to a browser client is most efficiently done using the lightweight JSON format. The JSON structure used in this screencast consists of 3 parts:

1. paginationInfo
2. facetInfo
3. results

The following link shows the raw JSON format.

http://ps2.demo.marklogic.com:8090/search.json?q=superhero&pg=4&ps=15

7. jQuery code used to send, receive and render.

The code that initiates the call to MarkLogic search is as follows.

getSearchResults = function() {

    if (querystring(‘q’) != "")
    {
      $.ajax({
          url: getSearchUrl(querystring(‘pg’)),
          type: ‘GET’,
          dataType: "jsonp",
          jsonp : "callback",
          jsonpCallback: "srCallback"
      });
    }
    else
    {  // Code to clear the results pane…
    }
  };

A callback function called srCallback(data) receives the results from MarkLogic.

The jQuery code is available on the widget test page by viewing source within the browser.

8. Widget Test Page

Be sure to use the following widget test page links.

1. http://www.garyrusso.org/blog/testpage1.htm
2. http://www.garyrusso.org/blog/testpage1.htm?q=New+York+City&pg=2&ps=100

Conclusion

The screencast builds from the previous session. The objective is to educate and raise awareness of MarkLogic’s agile database development capabilities.

There are many more topics to cover so please stay tuned.

Tags: jQuery, jsonp, MarkLogic, XQuery