Highlighted

Search bar in the Welcome topic page

New Here ,
Sep 25, 2018

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!

Topics

HTML

Views

228

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Search bar in the Welcome topic page

New Here ,
Sep 25, 2018

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!

Topics

HTML

Views

229

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Sep 25, 2018

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.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Sep 25, 2018

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:

https://markjs.io/

One of the examples is a search bar with highlighting.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Sep 27, 2018

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Amebr LATEST
Adobe Community Professional ,
Sep 27, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...