• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Search bar in the Welcome topic page

New Here ,
Sep 25, 2018 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!

Views

1.3K

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
community guidelines
Community Expert ,
Sep 25, 2018 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

Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.

Votes

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
community guidelines
Community Expert ,
Sep 25, 2018 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.

Votes

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
community guidelines
Enthusiast ,
Sep 27, 2018 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>

Votes

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
community guidelines
Community Expert ,
Sep 27, 2018 Sep 27, 2018

Copy link to clipboard

Copied

LATEST

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.

Votes

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
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp