Multiple search bars?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
WriterAndrew
Propeller Head
Posts: 50
Joined: Tue Mar 05, 2019 2:43 am

Multiple search bars?

Post by WriterAndrew »

Hi,
I'm creating an HTML5 Top-Nav based doc portal. Most of my content will be small articles and the search bar in the title area works as I want.

However...

I am also including an API Reference guide that is visually very different (three vertical columns - TOC (left), Content (middle), and Example code etc. (right)

For the API reference, I would like a dedicated search bar located at the top of the TOC area, that ONLY returns results from the API info.
(In fact, preferably, rather than return a search results page, I'd like it to "jump" the user to the content they have searched for. (As an example of what I mean, look at www.stripe.com/docs/api)

Is this possible in Flare? If so, any suggestions on how?

Thanks
zappy0
Propeller Head
Posts: 37
Joined: Fri Mar 25, 2016 2:19 pm

Re: Multiple search bars?

Post by zappy0 »

I had a similar requirement for users to be able to search across all documents or just search within a specific type (API, Help, Reference, etc.). Madcap Flare has a feature called Concepts and within each Flare sub-project I created a Concept. For example, the API document has a concept named API and I assigned all of the topics to that. When I build the master Flare project, it takes care of adding a drop-down list to the Search box so the users have the option to specify a document type. I don't recall if there were some other steps to get this to work. All of my projects use the same Nav template.

Adding Concepts was the key to getting this to work.

I don't know of a way to add a Search bar above the TOC area. Instead, I created a Home page for the Master project and embedded a Search bar on it. In some cases, I figured users would locate this faster than the standard search box in the upper right. This Search bar allows the user to search across all documents or search within a specific document type.

<body onload="setFocusButton">
. . .
<p>Search for a word or phrase across the entire consolidated documentation site.</p>
<p> </p>
<MadCap:conditionalText MadCap:conditions="Primary.Standard Content">
<form name="help-search-form">
<input type="text" name="help-search-text" />
<select name="concept">
<option value="">All Files</option>
<option value="API Reference Documents">API Reference Documents</option>
<option value="Application Online Help">Application Online Help</option>
<option value="Implementation Reference Documents">Implementation Reference Documents</option>
<option value="Installation Guides">Installation Guides</option>
</select>
<button type="submit" name="searchBtn" id="searchBtn" onclick="open_help_search()">Search</button>
</form>
</MadCap:conditionalText>

The Script is defined in the masterPage.flmsp file for my master project:

<script type="text/javascript">
function open_help_search() {
var uri = 'https://docs.example.com/consolidated/index.html';
var reference = encodeURIComponent(document.getElementsByName('help-search-text')[0].value);
var facet = encodeURIComponent(document.getElementsByName('concept')[0].value);

if (reference != "") {
reference = '#search-' + reference + "?f=" + facet;
}

window.open(uri + reference, "_parent")
}

. . .

window.open(uri + reference, "_parent")
}
</script>
<script type="text/javascript">
function setFocusButton(){
document.getElementById('searchBtn').focus();
}
</script>

I assume rather than providing a drop-down list, it would work to simply provide the "API Reference Documents" concept as a parameter to get to a search page with just API doc results. So, using your example, and if you had an Index.html page for launching the search, the URL constructed by a script might be:

https://stripe.com/docs/api/account/ind ... 0Documents
Post Reply