How do I merge search functions that use different inputs

Meteor-easy-search package uses a Blaze incorporated search input bar in the style below: {{> EasySearch.Input index=myIndex}}

Im also using Framework7, which also has a search tool that is in this format.

http://framework7.io/docs/searchbar.html#.Vs7FOX19670

So I tried to combine the 2 like this

    <div class="page">
        <!-- Search Bar -->
        <form class="searchbar">
            <div class="searchbar-input">
                 <input type="search" placeholder="Search"> <!-- the input -->
                 {{> EasySearch.Input index=myIndex}} <!-- putting here doesnt work --> 
                 {{> EasySearch.Input index=myIndex type ="search"}} <!-- trying my luck, doesnt work--> 
                <a href="#" class="searchbar-clear"></a>
            </div>
            <a href="#" class="searchbar-cancel">Cancel</a>
        </form>

            <div class="searchbar-overlay"></div>

            <div class="page-content">
                <div class="content-block searchbar-not-found"> Nothing found </div>
                <div class="list-block list-block-search searchbar-found">
                <!-- this part clashes with easy-search's code here 
                          {{#EasySearch.IfNoResults index=myIndex}}
                              <div>No results found!</div>
                           {{/EasySearch.IfNoResults}}
                      --> 
                    <ul> <!-- search results --> </ul>
                </div>
            </div>
        </div>

I tried to insert the Blaze formatted easy-search bar and it [1] screws the formatting of Framework7 bar and [2] the easy-search does not work. Im trying to search by the header of the to-do item, as well as its contents. Also search results formatting clashes too.

How should I go about the implementation? Do I use both or pick one? Im looking through search through 2 collections, the posts and the messages parked under each post.

[mervynteo]

Thanks @matteodem, great help again. With the template helper above, will the below be a correct understanding? Im using easy-search to search, but with FW7 clear and cancel buttons, as well as FW7 search bar UI formatting. Not sure how do I bring out in html the cancel and clear functions of FW7.

 <form class="searchbar">
      <div class="searchbar-input">
           <!-- <input type="search" placeholder="Search">  FW7 input format, removed -->
           {{> EasySearch.Input index=myIndex attributes=attributes}}
           <a href="#" class="searchbar-clear"></a>  <!-- need to remove? will it be in the {{>}}? --> 
     </div>
     <a href="#" class="searchbar-cancel">Cancel</a>  <!-- need to remove? will it be in the {{>}}? -->
 </form>

Template.myTemplate.helpers({
  attributes: function () {
    return { 
       type: 'search',
       placeholder: 'search here',
       class: {
            'searchbar-clear', 
           'searchbar-cancel'
       }
    };
  }
});

[matteodem]

How did you try to put in the search components? Please give me the same html code with the components in there.