How do I merge search functions that use different inputs

[mervynteo]

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.

[matteodem]

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

[matteodem]

I do not see where you are using EasySearch.Each to loop through the search results.

[mervynteo]

I left it out earlier as I did not make much changes to that part of the codes. Mixing both gave me errors so currently i stuck to easy-search layout for the Each loop but I hope to integrate it with FW7. Have added it above.

[matteodem]

Please show me the errors

[matteodem]

You can define attributes on your input if you need special classes, I don't really understand what the problem here is.

[mervynteo]

The issue is merging the 2 search; have easy-search + FW7's formatting and bar functions/appearance. I hope to retain the clear searchand results notice.

Is it possible to show how to fit the easy-search handlebar {{> EasySearch.Input index=myIndex}} into the FW7's <input type='search' ....> bar formatting?

[matteodem]

You can override the type by simply having attributes have a key of type and a value of search:

Template.myTemplate.helpers({
  attributes: () => {
    return { type: 'search', ... };
  }
});

See source code here https://github.com/matteodem/meteor-easy-search/blob/master/packages/easysearch:components/lib/input/input.js#L55

[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]

the value of class should also be a string. Blaze can convert an object of string values to actual html attributes. Also the logic for clear and cancel can be implemented through component methods, please look them up in the docs.

[mervynteo]

Do you mean that for attributes, I can only define the type, placeholder and class (which is also just a string/name?). As for cancelling and clearing the search bar, I would have to create my own helpers?

[matteodem]

You would need to use the component methods, which are in the docs.

[mervynteo]

Ok Ill try to figure it out with the logging the getComponentMethods stuff. I have a more tricky issue with Issue #485. Appreciate some guidance there. Thanks.