Search

By Ken Hawkins

search Requires EBI Visual Framework 1.1.0, 1.2.0

Use these patterns to add search your project or subsite.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how


Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<h3>Search in local masthead</h3>
<p>You may place your service search in the local masthead using this pattern. This is the most widely used approach, if you do so be sure to include the id <code>#local-search</code> on your <code>form</code> element.</p>

<p>When your page contains an element with the id of <code>#local-search</code> or <code>#ebi_search</code>, the class <code>.no-global-search</code> will be added to the <code>body</code> tag and the black bar (gloabl-masthead) search will be disabled, as has happened on this page.</p>

<div id="local-masthead" class="meta-background-color meta-background-image columns">
  <header>
    <div class="masthead row">
      <!-- local-title -->
      <div class="columns medium-7" id="local-title">
        <h1><a href="#" title="Back to EMBL-EBI Style Lab homepage">Sample masthead</a></h1>
      </div>
      <!-- /local-title -->
      <div class="columns medium-5">
        <form id="local-search" name="local-search" action="[search-action]" method="post">
          <fieldset>
            <div class="input-group margin-bottom-none">
              <input type="text" name="first" id="local-searchbox" placeholder="Search this service" class="input-group-field">
              <div class="input-group-button">
                <input type="submit" name="submit" value="1" class="button icon icon-functional">
              </div>
            </div>
            <small class="">
              <!-- If your search is more complex than just a keyword search, you can link to an Advanced Search -->
              <!-- <span class="adv"><a href="../search" id="adv-search" title="Advanced">Advanced</a></span> | -->
              <!-- Include some example searchterms - keep them short and few. -->
              <a href="[search-url-1]">[search-1]</a>
              <a href="[search-url-1]">[search-2]</a>
              <a href="[search-url-1]">[search-3]</a>
            </small>
          </fieldset>
        </form>
      </div>
    </div>
  </header>
</div>

<h3 class="padding-top-large">Standalone search</h3>
<p>If you want to place your site search inside your main content, use this pattern it's much the same as the above.</p>

<div class="row">
  <div class="columns medium-5 medium-push-2 callout">
    <form id="content-search" name="content-search" action="[search-action]" method="post">
      <h4>Search this project</h4>
      <fieldset>
        <div class="input-group margin-bottom-none">
          <input type="text" name="first" id="content-searchbox" class="input-group-field">
          <div class="input-group-button">
            <input type="submit" name="submit" value="1" class="button icon icon-functional">
          </div>
        </div>
        <small class="">
          <!-- If your search is more complex than just a keyword search, you can link to an Advanced Search -->
          <span class="adv"><a href="../search" id="adv-search" title="Advanced">Advanced</a></span>
          |
          <!-- Include some example searchterms - keep them short and few. -->
          <a href="[search-url-1]">[search-1]</a>
          <a href="[search-url-1]">[search-2]</a>
          <a href="[search-url-1]">[search-3]</a>
        </small>
      </fieldset>
    </form>
  </div>
</div>



JS