GlobalSearch
AppCommand-palette-style global search field. Supports a categorised result list, keyboard navigation and result selection.
<%- include('modules/app/GlobalSearch', {
placeholder: 'Search…',
query: req.query.q || '',
results: searchResults,
action: '/search'
}) %>Searching…
<%- include('modules/app/GlobalSearch', {
placeholder: 'Search…',
query: req.query.q,
loading: true
}) %><%
var _placeholder = locals.placeholder || 'Search…';
var _results = locals.results || [];
var _query = locals.query || '';
var _loading = !!locals.loading;
var _id = 'gs-' + Math.random().toString(36).substr(2, 6);
var grouped = {};
_results.forEach(function (r) {
var cat = r.category || 'Results';
if (!grouped[cat]) grouped[cat] = [];
grouped[cat].push(r);
});
var cats = Object.keys(grouped);
%>
<%- include('../ui/SearchBar', {
id: _id + '-input',
placeholder: _placeholder,
value: _query,
clearable: true,
}) %>
<% if (_loading) { %>
Searching…
<% } else if (_results.length === 0) { %>
No results for "<%= _query %>"
<% } else { %>
<% var optIdx = 0; %>
<% cats.forEach(function (cat) { %>
<%= cat %>
<% grouped[cat].forEach(function (r) { %>
<% optIdx++; %>
<% }); %>
<% }); %>
<% } %>