<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">
<li class="search-filter__list-item" data-search="Atom Example ">
<a class="search-filter__list-item-link" title="Atom Example" href="atom-example.html">Atom Example</a>
</li>
<li class="search-filter__list-item" data-search="Molecule Example ">
<a class="search-filter__list-item-link" title="Molecule Example" href="molecule-example.html">Molecule Example</a>
</li>
<li class="search-filter__list-item" data-search="Organism Example ">
<a class="search-filter__list-item-link" title="Organism Example" href="organism-example.html">Organism Example</a>
</li>
<li class="search-filter__list-item" data-search="Button ,btn">
<a class="search-filter__list-item-link" title="Button" href="button.html">Button</a>
</li>
<li class="search-filter__list-item" data-search="Checkbox ">
<a class="search-filter__list-item-link" title="Checkbox" href="checkbox.html">Checkbox</a>
</li>
<li class="search-filter__list-item" data-search="Datepicker ">
<a class="search-filter__list-item-link" title="Datepicker" href="datepicker.html">Datepicker</a>
</li>
<li class="search-filter__list-item" data-search="Input ">
<a class="search-filter__list-item-link" title="Input" href="input.html">Input</a>
</li>
<li class="search-filter__list-item" data-search="Label ">
<a class="search-filter__list-item-link" title="Label" href="label.html">Label</a>
</li>
<li class="search-filter__list-item" data-search="Radio ">
<a class="search-filter__list-item-link" title="Radio" href="radio.html">Radio</a>
</li>
<li class="search-filter__list-item" data-search="Select ">
<a class="search-filter__list-item-link" title="Select" href="select.html">Select</a>
</li>
<li class="search-filter__list-item" data-search="Textarea ">
<a class="search-filter__list-item-link" title="Textarea" href="textarea.html">Textarea</a>
</li>
<li class="search-filter__list-item" data-search="Header ">
<a class="search-filter__list-item-link" title="Header" href="heading.html">Header</a>
</li>
<li class="search-filter__list-item" data-search="Header Page ">
<a class="search-filter__list-item-link" title="Header Page" href="heading-page.html">Header Page</a>
</li>
<li class="search-filter__list-item" data-search="Image ">
<a class="search-filter__list-item-link" title="Image" href="image.html">Image</a>
</li>
<li class="search-filter__list-item" data-search="Link ">
<a class="search-filter__list-item-link" title="Link" href="link.html">Link</a>
</li>
<li class="search-filter__list-item" data-search="Link Button ">
<a class="search-filter__list-item-link" title="Link Button" href="link-button.html">Link Button</a>
</li>
<li class="search-filter__list-item" data-search="Link Social ">
<a class="search-filter__list-item-link" title="Link Social" href="link-social.html">Link Social</a>
</li>
<li class="search-filter__list-item" data-search="Loader Bar ">
<a class="search-filter__list-item-link" title="Loader Bar" href="loader-bar.html">Loader Bar</a>
</li>
<li class="search-filter__list-item" data-search="Loader Spinner ">
<a class="search-filter__list-item-link" title="Loader Spinner" href="loader-spinner.html">Loader Spinner</a>
</li>
<li class="search-filter__list-item" data-search="Logo ">
<a class="search-filter__list-item-link" title="Logo" href="logo.html">Logo</a>
</li>
<li class="search-filter__list-item" data-search="paragraph ">
<a class="search-filter__list-item-link" title="paragraph" href="paragraph.html">paragraph</a>
</li>
<li class="search-filter__list-item" data-search="Scroll progress bar ">
<a class="search-filter__list-item-link" title="Scroll progress bar" href="scroll-progress-bar.html">Scroll progress bar</a>
</li>
<li class="search-filter__list-item" data-search="SVG icon ">
<a class="search-filter__list-item-link" title="SVG icon" href="svg-icon.html">SVG icon</a>
</li>
<li class="search-filter__list-item" data-search="Logo ">
<a class="search-filter__list-item-link" title="Logo" href="svg-text.html">Logo</a>
</li>
<li class="search-filter__list-item" data-search="animate-on-scroll-wrapper ">
<a class="search-filter__list-item-link" title="animate-on-scroll-wrapper" href="animate-on-scroll-wrapper.html">animate-on-scroll-wrapper</a>
</li>
<li class="search-filter__list-item" data-search="Box ">
<a class="search-filter__list-item-link" title="Box" href="box.html">Box</a>
</li>
<li class="search-filter__list-item" data-search="Box Image ">
<a class="search-filter__list-item-link" title="Box Image" href="box-image.html">Box Image</a>
</li>
<li class="search-filter__list-item" data-search="Box Image Duotone ">
<a class="search-filter__list-item-link" title="Box Image Duotone" href="box-image-duotone.html">Box Image Duotone</a>
</li>
<li class="search-filter__list-item" data-search="Icon Box ">
<a class="search-filter__list-item-link" title="Icon Box" href="icon-box.html">Icon Box</a>
</li>
<li class="search-filter__list-item" data-search="Text Box ">
<a class="search-filter__list-item-link" title="Text Box" href="text-box.html">Text Box</a>
</li>
<li class="search-filter__list-item" data-search="Breadcrumbs ">
<a class="search-filter__list-item-link" title="Breadcrumbs" href="breadcrumb.html">Breadcrumbs</a>
</li>
<li class="search-filter__list-item" data-search="Cookie info ">
<a class="search-filter__list-item-link" title="Cookie info" href="cookie-info.html">Cookie info</a>
</li>
<li class="search-filter__list-item" data-search="form field ">
<a class="search-filter__list-item-link" title="form field" href="form-field.html">form field</a>
</li>
<li class="search-filter__list-item" data-search="List of links ">
<a class="search-filter__list-item-link" title="List of links" href="link-list.html">List of links</a>
</li>
<li class="search-filter__list-item" data-search="List page item ">
<a class="search-filter__list-item-link" title="List page item" href="list-page-item.html">List page item</a>
</li>
<li class="search-filter__list-item" data-search="List page link ">
<a class="search-filter__list-item-link" title="List page link" href="list-page-link.html">List page link</a>
</li>
<li class="search-filter__list-item" data-search="Main menu ">
<a class="search-filter__list-item-link" title="Main menu" href="nav-main-list.html">Main menu</a>
</li>
<li class="search-filter__list-item" data-search="Navigation priority ">
<a class="search-filter__list-item-link" title="Navigation priority" href="nav-main-list-priority.html">Navigation priority</a>
</li>
<li class="search-filter__list-item" data-search="List of links ">
<a class="search-filter__list-item-link" title="List of links" href="nav-trigger.html">List of links</a>
</li>
<li class="search-filter__list-item" data-search="Sections that can overlap ">
<a class="search-filter__list-item-link" title="Sections that can overlap" href="overlap-item.html">Sections that can overlap</a>
</li>
<li class="search-filter__list-item" data-search="Pageheader content ">
<a class="search-filter__list-item-link" title="Pageheader content" href="pageheader-content.html">Pageheader content</a>
</li>
<li class="search-filter__list-item" data-search="Parallax wrapper ">
<a class="search-filter__list-item-link" title="Parallax wrapper" href="parallax-wrapper.html">Parallax wrapper</a>
</li>
<li class="search-filter__list-item" data-search="Rich Text Editor ">
<a class="search-filter__list-item-link" title="Rich Text Editor" href="rich-text-editor.html">Rich Text Editor</a>
</li>
<li class="search-filter__list-item" data-search="Search Filter ">
<a class="search-filter__list-item-link" title="Search Filter" href="">Search Filter</a>
</li>
<li class="search-filter__list-item" data-search="social media collection ">
<a class="search-filter__list-item-link" title="social media collection" href="social-media-collection.html">social media collection</a>
</li>
<li class="search-filter__list-item" data-search="About columns ">
<a class="search-filter__list-item-link" title="About columns" href="about-boxes.html">About columns</a>
</li>
<li class="search-filter__list-item" data-search="Feedback Box ">
<a class="search-filter__list-item-link" title="Feedback Box" href="feedback-box.html">Feedback Box</a>
</li>
<li class="search-filter__list-item" data-search="Icon Boxes ">
<a class="search-filter__list-item-link" title="Icon Boxes" href="icon-boxes.html">Icon Boxes</a>
</li>
<li class="search-filter__list-item" data-search="Primary Boxes ">
<a class="search-filter__list-item-link" title="Primary Boxes" href="primary-boxes.html">Primary Boxes</a>
</li>
<li class="search-filter__list-item" data-search="Secondary Boxes ">
<a class="search-filter__list-item-link" title="Secondary Boxes" href="secondary-boxes.html">Secondary Boxes</a>
</li>
<li class="search-filter__list-item" data-search="footer ">
<a class="search-filter__list-item-link" title="footer" href="footer.html">footer</a>
</li>
<li class="search-filter__list-item" data-search="Site navigation ">
<a class="search-filter__list-item-link" title="Site navigation" href="header.html">Site navigation</a>
</li>
<li class="search-filter__list-item" data-search="list-page ">
<a class="search-filter__list-item-link" title="list-page" href="list-page.html">list-page</a>
</li>
<li class="search-filter__list-item" data-search="Pageheader - dots ">
<a class="search-filter__list-item-link" title="Pageheader - dots" href="pageheader-dots.html">Pageheader - dots</a>
</li>
<li class="search-filter__list-item" data-search="Pageheader - image ">
<a class="search-filter__list-item-link" title="Pageheader - image" href="pageheader-image.html">Pageheader - image</a>
</li>
<li class="search-filter__list-item" data-search="Pageheader - image alt ">
<a class="search-filter__list-item-link" title="Pageheader - image alt" href="pageheader-image-alt.html">Pageheader - image alt</a>
</li>
<li class="search-filter__list-item" data-search="Pageheader - Slider ">
<a class="search-filter__list-item-link" title="Pageheader - Slider" href="pageheader-slider.html">Pageheader - Slider</a>
</li>
<li class="search-filter__list-item" data-search="Pageheader - video ">
<a class="search-filter__list-item-link" title="Pageheader - video" href="pageheader-video.html">Pageheader - video</a>
</li>
<li class="search-filter__list-item" data-search="Related header ">
<a class="search-filter__list-item-link" title="Related header" href="related-header.html">Related header</a>
</li>
<li class="search-filter__list-item" data-search="Image text section ">
<a class="search-filter__list-item-link" title="Image text section" href="image-text-section.html">Image text section</a>
</li>
<li class="search-filter__list-item" data-search="Text image section ">
<a class="search-filter__list-item-link" title="Text image section" href="text-image-section.html">Text image section</a>
</li>
<li class="search-filter__list-item" data-search="Topbar ">
<a class="search-filter__list-item-link" title="Topbar" href="topbar.html">Topbar</a>
</li>
<li class="search-filter__list-item" data-search="Topbar related ">
<a class="search-filter__list-item-link" title="Topbar related" href="topbar-related.html">Topbar related</a>
</li>
<li class="search-filter__list-item" data-search="404 ">
<a class="search-filter__list-item-link" title="404" href="404.html">404</a>
</li>
<li class="search-filter__list-item" data-search="500 ">
<a class="search-filter__list-item-link" title="500" href="500.html">500</a>
</li>
<li class="search-filter__list-item" data-search="AOS page ">
<a class="search-filter__list-item-link" title="AOS page" href="aos-page.html">AOS page</a>
</li>
<li class="search-filter__list-item" data-search="Article ">
<a class="search-filter__list-item-link" title="Article" href="article-with-progress-bar.html">Article</a>
</li>
<li class="search-filter__list-item" data-search="Forms ">
<a class="search-filter__list-item-link" title="Forms" href="forms.html">Forms</a>
</li>
<li class="search-filter__list-item" data-search="Frontpage ">
<a class="search-filter__list-item-link" title="Frontpage" href="frontpage.html">Frontpage</a>
</li>
<li class="search-filter__list-item" data-search="GridPage ">
<a class="search-filter__list-item-link" title="GridPage" href="grid-page.html">GridPage</a>
</li>
<li class="search-filter__list-item" data-search="Overlapping-sections page ">
<a class="search-filter__list-item-link" title="Overlapping-sections page" href="overlapping-sections.html">Overlapping-sections page</a>
</li>
<li class="search-filter__list-item" data-search="Page ">
<a class="search-filter__list-item-link" title="Page" href="page.html">Page</a>
</li>
<li class="search-filter__list-item" data-search="Related header ">
<a class="search-filter__list-item-link" title="Related header" href="page-with-related-header.html">Related header</a>
</li>
<li class="search-filter__list-item" data-search="Colors ">
<a class="search-filter__list-item-link" title="Colors" href="colors.html">Colors</a>
</li>
<li class="search-filter__list-item" data-search="Preview ">
<a class="search-filter__list-item-link" title="Preview" href="preview.html">Preview</a>
</li>
</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.