Permalink
Browse files

fix(search): added action attr to form elements and updated js accord…

…ingly
  • Loading branch information...
katrin-freihofner committed Apr 14, 2017
1 parent 2d02ebf commit 34aff95c55c116acc88544cd5d19d6ca0c40b750
View
@@ -1,7 +1,6 @@
require('./js-common-components/toggler');
require('./js-common-components/closest');
require('./js-common-components/utils');
require('./expandable/expandable');
require('./tabs/tabs');
require('./slider/slider');
View
@@ -18,8 +18,8 @@ function createListElement(result) {
return opt;
}
function fetchResults(select) {
fetch('/assets/data/search_results.json')
function fetchResults(select, searchData, params) {
fetch(`${searchData}?${params}`)
.catch(() => '{ results: [] }')
.then(res => res.json())
.then((searchResults) => {
@@ -36,10 +36,15 @@ function fetchResults(select) {
const initData = () => {
$('.js-search').forEach(el => {
const ul = el.parentNode.appendChild(document.createElement('ul'));
const form = el.parentNode;
const ul = form.appendChild(document.createElement('ul'));
const searchData = form.action;
ul.classList.add('search__results', 'expandable');
el.addEventListener('keyup', debounce(() => {
fetchResults(ul);
const params = $('input', form)
.map(input => `${input.name}=${input.value}`)
.join('&');
fetchResults(ul, searchData, params);
}, 150));
el.addEventListener('blur', () => {
clearResults(ul);
View
@@ -8,7 +8,6 @@ $nav-secondary-background: $gray-900;
$nav-height: 2.75rem;
$nav-height-secondary: 1.5rem;
// $nav-breakpoint: 760px;
$nav-breakpoint: 980px;
$nav-search-width: 200px;
@@ -21,13 +20,6 @@ $nav-search-results-width: 276px;
position: relative;
}
@media (min-width: $nav-breakpoint) {
.nav {
//height: auto;
}
}
.nav.has-no-secondary {
height: $nav-height;
}
@@ -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>
<input type="search" class="inputfield inputfield--search nav__search js-search" id="i0"/>
<form action="/assets/data/search_results.json">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
</form>
<button data-target="#nav-bar-example1" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
@@ -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>
<input type="search" class="inputfield inputfield--search nav__search js-search" id="i0"/>
<form action="/assets/data/search_results.json">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
</form>
<button data-target="#nav-bar-example2" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
</div>
@@ -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>
<input type="search" class="inputfield inputfield--search nav__search js-search" id="i0"/>
<form action="/assets/data/search_results.json">
<input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
</form>
<a class="nav__btn nav__btn--cta" href="https://www.dynatrace.com/trial/">Free trial</a>
<button data-target="#nav-bar-example3" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>

0 comments on commit 34aff95

Please sign in to comment.