Search Filter

<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="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. */
  • Content:
    .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);
            }
        }
    }
    
  • URL: /components/raw/search-filter/search-filter.css
  • Filesystem Path: patterns/02-molecules/search-filter/search-filter.css
  • Size: 1 KB
  • Content:
    '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';
                            }
                        }
                    });
                }
            };
        }();
    
  • URL: /components/raw/search-filter/search-filter.js
  • Filesystem Path: patterns/02-molecules/search-filter/search-filter.js
  • Size: 1.8 KB

There are no notes for this item.