Tuesday, March 30, 2010

Can I create a custom search form that displays the search results enclosed in navigation frames?

I've written before about how to link to an EKP page in such a way that the navigation frames are retained. The technique described in that post works so long as the exact URL of the target page (i.e. the page that will be enclosed in the navigation frames) is known in advance.

However, what if you want to provide access to a set of pages for which the exact URLs cannot be known in advance because they depend on input from the user? In particular, what if you want to provide a custom search form that displays the search results enclosed in the navigation frames?

In this case the technique described in the previous post won't work as-is because the exact URL depends on the user's search query. For example, if the user searches for bacon then the URL of the search results page will be as shown below.

/ekp/servlet/ekp?TX=FRAMELESSCATALOGSEARCH&KEYW=bacon

With a little JavaScript ingenuity we can achieve the desired effect. The trick is to add an onsubmit handler to the search form that takes the query and uses it to construct the URL of the target page, which it then uses to populate another, hidden, form field. This requires a JavaScript function contained in a script element that we will need to include in the head of the page's HTML source.

<script type="text/javascript">
 function setMainSrc() {
  document.searchform.mainSrc.value
   = "/ekp/servlet/ekp?TX=FRAMELESSCATALOGSEARCH&KEYW="
   + encodeURIComponent(document.searchform.KEYW.value);
 }
</script>

Below is the form itself, including both onsubmit handler and hidden field.

<form action="/ekp/servlet/ekp/pageLayout"
      name="searchform"
      onsubmit="setMainSrc(); return true;">
 <input name="KEYW" type="text">
 <input name="mainSrc" type="hidden">
 <input type="submit" value="Search">
</form>

When the user enters a query and clicks the Search button, he or she will see EKP's search results page enclosed in the standard navigation frames, even though the original page did not include any frames.

No comments: