dddd.static-search

Key Features

• Static data keyword search
• Default template middleware support : Underscore.js

Getting Started

Implement the following on the target page:

add search area markup

<div>
    <form type="submit" action="{search path}">
        <input type="text" name="{search paramter name}" />
        <button type="submit">Search</button>
    </form>

    <section id="{search result container id}">
    </section>
</div>

define dddd.static-search library with CDN

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/mindcloud92/dddd.static-search@6ab1ea67a0357bed734a216d4de9e675c13ec45a/src/dist/dddd.search.min.js"></script>

implement window.onload function

Read more about Creating an instance

case1: render search results using default template middleware

• import template middleware library with CDN

  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>

• define search result template

  <script id="{search result template id}" type="text/template">
    <!-- search result template -->
  </script>

• implement window.onload function

  window.onload = () => {
    const data = [<!-- search target origin data -->];
    const options = {<!-- options -->};
  
    new dddd.Search(data, options).renderResult();
  }

case2: customization

window.onload = () => {
  const data = [<!-- search target origin data -->];
  const options = {
    hasCustomRenderFunction: true
    <!-- options -->
  };

  const { keyword, result } = new dddd.Search(data, options);
  
  setKeyword(keyword);
  renderPostSection(result);
}

function setKeyword (keyword) {
  document.getElementById('searchInput').value = keyword;
}

function renderPostSection (posts) {
  const $postSection = createPostSection(posts);
  document.getElementById('postSection').innerHTML = $postSection.innerHTML;
}

function createPostSection (posts) {
  return posts.reduce((acc, curr) => {
    const $link = document.createElement('a');
    $link.text = curr.title;

    acc.innerHTML += $link.outerHTML;
    // result dom create & append to section

    return acc;
  }, document.createElement('div'));
}

Usage Example

- mindcloud92.github.io