Looking for working example of search component built with Meteor and React

help
1

Hey guys, I’m looking for a working example of search component built with Meteor and React. Nothing special, I would just implement this feature for searching through documents’ names, right now I have two components - searchbar and a list view where I list my documents, so it’d be nice to just type documen’ts name in searchbar and have it displayed in this list view, but I have no idea how to implement it. Any package suggestion would be great too. Thank you for your time.

2

Guys, sorry for being a dumbo, I googled around and made use of easy:search and meteor-blaze-react-component packages. If you would like to see my example I’d post it up though :slight_smile:

3

I’ve use this and implement in React… No need to install the package itself but you can if you wish

https://atmospherejs.com/meteorhacks/search-source

4

Hi Vadik,

I would love to see your example of how you have used easy:search and meteor-blaze-react, especially the createContainer and how you consumed that?

5

Hey man, sorry for late response, haven’t been to a forum for a while.
As I learned from package’s docs the only way to use it is with Blaze Templates so first I created a template for search functionality like this:

<template name="search">
    <div class="container">
        <div class="input">
              {{> EasySearch.Input attributes=inputAttributes index=itemsIndex}}
                  {{#EasySearch.Each index=itemsIndex}}
                    <div class="container">
                	<ul>
				<li>{{itemName}}</li>
				<li>{{itemOwner}}</li>
			</ul> 
                    </div>
                  {{/EasySearch.Each}}
             </div>
          </div>
</template>

To make use of this template I defined a helper:

import { Template } from 'meteor/templating';
import { Items } from '../../api/collections/items.js';

Template.search.helpers({
    itemsIndex: () => ItemsIndex
});


Template.search.helpers({
  inputAttributes: () => {
    return {
      placeholder: 'Sample text'
    };
  }
});

So after that I used it in my component, let’s say ItemsList.jsx like so:

import React, { Component } from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
import '../templates/search.html';
import '../templates/helpers.js';

export default class ItemsList extends Component {
    render() {
        return (
            <div className="container">
                <h3>Sample text</h3>
                <Blaze template="search" />
            </div>
        )
    }
}

Searchbar I needed was really that simple but I don’t think it would be hard to implement something more complex. Btw in case the search functionality depends fully on built-in Meteor features as Blaze, it’s no need to use something React-related to get data. In real project Search template also contains an event to interract with data.

6

How about this: https://blog.designveloper.com/2016/06/21/react-structure-container-component-in-meteor/
It totally rocks!!

7

But what if you need the results to be clickable and linked to another page? You’re out of luck if using react-router’s <Link>