Skip to main content
Participant
September 25, 2018
Question

Search bar in the Welcome topic page

  • September 25, 2018
  • 3 replies
  • 1459 views

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!

This topic has been closed for replies.

3 replies

Inspiring
September 27, 2018

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;">&#160;</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>&#160;</p>

                </div></td>

                <td><div class="search-delete" data-if="$sc.canDelete(#{@index})"

                         data-click="$sc.handleDelete(#{@index})">

                    <p>&#160;</p>

                </div></td>

            </tr>

        </table>

    </div>

</div>

Community Expert
September 28, 2018

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.

Community Expert
September 26, 2018

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:

https://markjs.io/

One of the examples is a search bar with highlighting.

Peter Grainge
Community Expert
Community Expert
September 25, 2018

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.

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.