Copy link to clipboard
Copied
Hi!
I want to add a Search bar to the Welcome page topic of my project. It would function just like the Search feature in the navigation but be in the actual topic page. Is this possible? I assume there's some coding involved to accomplish this but want to know if it's even possible before asking my developer for help. I'm using RoboHelp 2017 and a Responsive HTML5 output. Thanks!
Copy link to clipboard
Copied
Using RoboHelp's own search, I would doubt it is possible and it would take a developer's skill to find out.
I have never seen anyone wanting to do this before so I don't think you will find an existing answer. My first thought was the box would go out of sight as soon as the user starts scrolling.
I'm wondering what the advantage is.
See www.grainge.org for free RoboHelp and Authoring information.
Copy link to clipboard
Copied
You'd need to build your own, but there are existing javascript and jquery plugins you can use (but takes some dev skill to work out how to include in your RH project).
Search for text highlighters. For example this one:
One of the examples is a search bar with highlighting.
Copy link to clipboard
Copied
What about this, from the Indigo layout, which provides what sounds like the functionality you're asking for.
<div class="frontpage-search-field" role="search" data-controller="SearchController:sc">
<input class="wSearchField" type="text" data-class="no-filter: !@KEY_FEATURE.filter"
data-attr="placeholder: @KEY_LNG.Search; aria-label:@KEY_LNG.Search"
data-value="KEY_SEARCH_TERM" data-focus="@focusin_searchbox(true)"
data-blur="$sc.handleFocusOut('focusin_searchbox')|timeout:200"
data-keyup="$mc.newSearch(node.value, event.keyCode),$sc.handleKey(event)|debounce:150"
tabindex="7" /><a class="wSearchLink" data-click="@EVT_SEARCH_TERM(true)"
data-attr="href:'#';aria-label: @KEY_LNG.SearchTitle"
tabindex="8"><span aria-hidden="true"
data-html="@KEY-LNG.Search"
style="display: none;"> </span></a>
<div data-if="@focusin_searchbox" class="search-list">
<table >
<tr data-repeat="search_results" data-class="search-suggestion:true; search-selected:@selected===#{@index}"
data-click="$sc.handleClick(#{@index})">
<td class="search-text-column"><div class="search-text"
data-itext="item.term">
<p> </p>
</div></td>
<td><div class="search-delete" data-if="$sc.canDelete(#{@index})"
data-click="$sc.handleDelete(#{@index})">
<p> </p>
</div></td>
</tr>
</table>
</div>
</div>
Copy link to clipboard
Copied
That's the code for the built-in search-the-whole-documentation search box, rather than a find-in-page search.
Although you could probably adapt the html structure for a new find-in-page box, but you'd have to be careful not to bork the regular search.