<div class="js-search-filter search-filter">
<input class="js-search-filter-input input search-filter__input" autocomplete="off" placeholder="Search components" name="q" />
<svg class="svg-icon search-filter__icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../dist/icons/icons.svg#icon-search"></use>
</svg>
<ul class="js-search-filter-list search-filter__list">
</ul>
</div>
<div class="js-search-filter search-filter">
<input class="js-search-filter-input input search-filter__input" autocomplete="off" placeholder="Search components" name="q" />
{{> @svg-icon class="search-filter__icon" svgIconName="icon-search"}}
<ul class="js-search-filter-list search-filter__list">
{{#componentList}}
<li class="search-filter__list-item" data-search="{{ this.title }} {{ this.tags }}">
<a class="search-filter__list-item-link" title="{{ this.title }}" href="{{path '/components/detail/{{ this.handle }}' }}">{{ this.title }}</a>
</li>
{{/componentList}}
</ul>
</div>
/* No context defined for this component. */
.search-filter {
position: relative;
&--active {
.search-filter {
&__list {
display: block;
}
}
}
&__icon {
position: absolute;
right: 13px;
top: 12px;
width: 15px;
height: 15px;
pointer-events: none;
}
&__list {
background: var(--color-white);
position: absolute;
padding: 0;
margin: 0;
max-height: 400px;
width: 290px;
overflow: auto;
display: none;
box-shadow: 0 0 32px rgba(0, 0, 0, 0.15);
}
&__list-item {
list-style: none;
border-bottom: 1px solid var(--color-gray);
}
&__list-item-link {
display: block;
padding: 5px 15px;
text-decoration: none;
color: var(--color-gray-dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background: var(--color-gray-light);
}
}
}
'use strict';
var novicell = novicell || {};
novicell.searchFilter =
novicell.searchFilter ||
new function() {
this.init = function() {
const searchFilters = document.getElementsByClassName(
'js-search-filter'
);
for (let i = 0; i < searchFilters.length; i++) {
// Declare variables
const input = searchFilters[i].querySelector(
'.js-search-filter-input'
);
document.addEventListener('click', function(event) {
var isClickInside = searchFilters[i].contains(event.target);
if (!isClickInside) {
input.parentNode.classList.remove(
'search-filter--active'
);
}
});
input.addEventListener('focus', function() {
input.parentNode.classList.add('search-filter--active');
});
input.addEventListener('keyup', function() {
const filter = input.value.toUpperCase();
const ul = searchFilters[i].querySelector(
'.js-search-filter-list'
);
const li = ul.getElementsByTagName('li');
for (let x = 0; x < li.length; x++) {
const searchString = li[x].getAttribute('data-search');
if (searchString.toUpperCase().indexOf(filter) > -1) {
li[x].style.display = '';
} else {
li[x].style.display = 'none';
}
}
});
}
};
}();
There are no notes for this item.