Permalink
Browse files

fix: added url attr for results in navbar search

  • Loading branch information...
katrin-freihofner committed Jun 26, 2017
1 parent 7989ec5 commit 9a229e7faf48af607b687f9ca1eb6601d38d6ab6
View
@@ -35,7 +35,7 @@ The Groundhog navbar appears in a two versions:
4. Add the search functionality and update the link to the search page. (Optional)
```html
<form action="/assets/data/search_results.json">
<form action="/search/">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
</form>
```
@@ -45,12 +45,15 @@ The Groundhog navbar appears in a two versions:
2. Update `<form>` action and attributes. (Optional)
```html
<form action="/assets/data/search_results.json" data-titleprop="label"
<form action="/search/" data-results="/assets/data/search_results.json" data-titleprop="label"
data-urlprop="path" data-maxresults="5" data-resultskey="results">
```
* `action="/assets/data/search_results.json"`
* `action="/search/"`
set the form's action.
* `data-results="/assets/data/search_results.json"`
sets the url for fetching the search results. (Optional, default: forms action attribute)
* `data-resultskey="results"`
sets the key for the list of search results. (Optional, default: results)
View
@@ -1,10 +1,7 @@
import $ from '../js-common-components/dollar';
import { debounce } from '../js-common-components/utils';
function clearResults(select) {
const emptySearchResults = select;
emptySearchResults.classList.remove('is-active');
while (select.firstChild) {
select.removeChild(select.firstChild);
}
@@ -32,18 +29,20 @@ function fetchResults(select, searchData, params, opts) {
const elements = trimmedresults.map(el => createListElement(el, opts));
window.requestAnimationFrame(() => {
clearResults(select);
select.classList.add('expandable', 'is-active');
select.classList.add('expandable');
elements
.forEach((el) => select.appendChild(el));
});
});
}
const initData = () => {
$('.js-search:not([action=""]').forEach(el => {
$('.js-search:not([action=""])').forEach(el => {
const form = el.parentNode;
const ul = form.appendChild(document.createElement('ul'));
const searchData = form.action;
ul.addEventListener('click', (e) => e.stopPropagation());
const searchData = form.dataset.results || form.action;
ul.classList.add('search__results', 'expandable');
const opts = {
title: form.dataset.titleprop || 'title',
@@ -52,13 +51,14 @@ const initData = () => {
resultskey: form.dataset.resultskey || 'results',
};
el.addEventListener('keyup', debounce(() => {
ul.classList.add('has-focus');
const params = $('input', form)
.map(input => `${input.name}=${input.value}`)
.join('&');
fetchResults(ul, searchData, params, opts);
}, 150));
el.addEventListener('blur', () => {
clearResults(ul);
$('body')[0].addEventListener('click', () => {
ul.classList.remove('has-focus');
});
});
};
View
@@ -280,7 +280,13 @@ $nav-search-to-icon-breakpoint: 560px !default;
box-shadow: none;
}
.nav .search__results.is-active {
.nav .search__results {
display: none;
}
.nav .search__results.has-focus {
display: block;
position: relative;
margin: 0;
padding: 12px 0 12px 0;
@@ -301,7 +307,9 @@ $nav-search-to-icon-breakpoint: 560px !default;
overflow: hidden;
}
.nav .search__results a:hover {
.nav .search__results a:hover,
.nav .search__results a:focus {
outline: none;
background-color: $gray-640;
}
@@ -3,8 +3,8 @@
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<form action="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
<form action="/search/" data-results="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm" autocomplete="off"/>
</form>
<a href="#" class="nav__search__icon"></a>
<button data-target="#nav-bar-example1" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
@@ -3,8 +3,8 @@
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<form action="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
<form action="/assets/data/search_results.json" data-results="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm" autocomplete="off"/>
</form>
<a href="#" class="nav__search__icon"></a>
<button data-target="#nav-bar-example2" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
@@ -3,8 +3,8 @@
<img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
</a>
<div class="nav__buttongroup">
<form action="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
<form action="/assets/data/search_results.json" data-results="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm" autocomplete="off"/>
</form>
<a href="#" class="nav__search__icon"></a>
<a class="nav__btn nav__btn--cta" href="https://www.dynatrace.com/trial/">Free trial</a>

0 comments on commit 9a229e7

Please sign in to comment.