Design keyword based search for frontpage

[bajiat]

Related to issue #629.

Definition of done

Frontpage

• There is a search field prominently visible on frontpage.
• Search field contains meaningful helptext.
• Search fields queries API backend collection.
  • Query uses API backend title field.
  • Query uses API backend backend_host field. - ?
• All search query fields are indexed.
• Search query is case insensitive.
• Search query accepts arbitrary length string, which can contain spaces.

Results page

• Search results are displayed on a new page
• Page has its own route.
  • Page route contains the search keyword(s)
• Page displays search query texts
• Page displayes number of results
• Page display search field (open items: does it contain the current search query)

Search results

• Individual results are listed separately.
• Result contains title text.
  • Title text displays prominently.
  • Title text links to View API backend.

[bajiat]

@frenchbread Since you were interested in the implementation task, could you take the design as well? Refer to #629 for original idea.

[frenchbread]

Wireframe:

Search field is displayed on each page in the header.

[frenchbread]

There are going to be two scenarios how to make a search for API Backends:

1. Using search field on the home page - wireframe.
2. Using search field in the header - wiraframe.

One of the approaches is to follow this guide provided in the README and use separate mongodb instance rather than build in meteor mongo. As mentioned in repo above:

By default, Meteor starts up its own instance of MongoDB, this does not have full-text indexing/search

Second is to build own method with a complex query:

return ApiBackends.find(<query_object>);

In example provided query_object takes name as a main key:

return ApiBackends.find({ "name": /maps/ }); 

// Returns an array ob objects with a name that contains "maps" word in it

Example above is case sensitive though, for that reason could use extended approach, e.g.:

return ApiBackends.find({ "name": /^maps$/i }); 

Or using RegEx by providing an object with a $regex operator:

return ApiBackends.find({ "name": { $regex : '^maps$' } }); // case INSENSITIVE

Source

[frenchbread]

One useful feature:

Once search is submitted, and if the search query 100% matches the apiBackend (or only one document was returned), we can redirect user directly to that API Backend View page.

[frenchbread]

Mongo query example that I came up with:

// Construct query
var query = {
  $or: [
    {
      name: {
        $regex: searchPhrase,
        $options: 'i'
      }
    },
    {
      backend_host: {
        $regex: searchPhrase,
        $options: 'i'
      }
    }
  ]
};

// Fetch apiBackends
var foundApiBackends = ApiBackends.find(query).fetch();

This example represents a search for <searchPhrase> in both name & backend_host fields.

$regex's i - option gives case-insensitivity (in Mongodb).

MongoDB - $regex docs.

Related commit - b4e83c7.

[frenchbread]

Search functionality is implemented and works nicely.

Even though documents are returned, getting this error:

Exception from sub searchApiBackends id PR3nriYFkine3PFka Error: Publish function can only return a Cursor or an array of Cursors

I've been trying to fix it by adding waitOn for subscription function to a /search route but it did not fix the error.

@brylie Any thoughts?

working-branch

[brylie]

@frenchbread it looks like you return an empty object if there is not a search term, which is not a cursor.

Check out the Guide to Full Text Search in Meteor for a working implementation.

Make sure you are also indexing the fields for searching, using _ensureIndexed, which is also demonstrated in the previously mentioned article.

[frenchbread]

@brylie Thanks! That helped to fix the issue.

[frenchbread]

PR #719 created. Currently having WIP label on it.

I'm going to improve the visual design of search result returned on a search page with @elnzv's help.

[frenchbread]

Removed WIP label.

@apinf/developers please review.