FAQ Search - return ids but also meta filter

by Ben Clayton

HTML

<script src="//flowcms.infxsolutions.com/script/handlebars.js/handlebars-v3.0.3.js"></script>
<input class="search" />

<div class="metafilter"></div>

<div class="results"></div>

<div class="ids"></div>

<hr/>
Complex Text search followed by two category filters (exclusive option only for each)
<br/>The search is case insensitive.
<br/> A partial word match is a valid match.
<br/> The Question match is weight stronger than the answer match.
<br/> Multiple words are treated as one for best match, but also improve chance of a match by there being alternative words.
<br/> does not support quotes as a whole string match only.
<br/> does not spell check and correct
<h5>
Priority matching:
<br/> Exact sentence extract match
<br/> Exact match with extra words allowed inbetween
<br/> Whole word match scoring (any order)
<br/> Partial start of word match
<br/> Match anywhere within words
</h5>



<script id="faq" type="text/html">
  {{#each .}}
  <div class="result {{mcls}}">
    <div>{{question}}</div>
    <div class="small">{{{answer}}}</div>
    <div class="score"><i>Score: {{score}}</i></div>
  </div>
  {{/each}}
</script>

CSS

.results {
  margin-top: 30px;
  position: relative;
}

.result {
  position: relative;
  border: 1px solid red;
  width: 500px;
  xheight: 100px;
  display: inline-block;
  margin: 4px;
  background-color: #FFFFD0;
  position: relative;
  opacity: 1;
  z-index: 2;
  overflow: hidden;
  padding: 3px;
}

.score {
  float: right;
}

.result.nomatch {
  display: none;
}

.result.trans {
  WebkitTransition: all 1s ease-in-out;
  MozTransition: all 1s ease-in-out;
  MsTransition: all 1s ease-in-out;
  OTransition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.result.hidden {
  z-index: 2;
  width: 10px;
  height: 15px;
  font-size: 2px;
}

.results {
  min-height: 500px;
}

.small {
  font-size: 0.8rem;
}

JavaScript

var faqs = [{
  "question": "I'm a vegetarian/vegan.  Are your products suitable for sport and exercise participants with alternative dietary requirements?",

  "answer": "<p class=\"p1\">The following flavours are suitable for a vegetarian/vegan diet:&nbsp;Sport Body fuel: Orange, Caribbean Burst, Brazilian Guava, Orange Tablets. Lite: Orange, Lemon &amp; Lime. Elite Dual Fuel: Orange, Citrus, Orange Gel.\t\t\n<span class=\"Apple-tab-span\" style=\"white-space:pre\">\n</span></p><div><br></div><div></div>",

  "author": "Consumer Care Team",

  "meta_tags": {

    "faq_type": ["Text"],

    "faq_keyword": ["All", "Ingredients and Suitability"]

  }
}, {
  "question": "My delivery hasn't turned up?",

  "answer": "\n\n\n\n\n\n\n\n<p class=\"p1\">You can track your order by visiting the DPD website and entering the tracking code that can be found on the email confirmation we sent you when your order was dispatched.<span class=\"Apple-tab-span\" style=\"white-space:pre\">\t\t</span></p><div><br></div><img src='//consumercarefaq.lrsdedicated.com/dyn/_dmp_assets/images/faqdemoimages0000owooplasticsinfographic2012b-2.jpg' title='Faq Demo Images 0000 Owoo Plasticsinfographic 2012 B' />",

  "author": "Consumer Care Team",

  "meta_tags": {

    "faq_type": ["Text"],

    "faq_keyword": ["All", "E-Commerce"]

  }
}, {
  "question": "My discount code didn't work",

  "answer": "<div>Please contact our Consumer Care team on 0800 096 3666, who will be able to assist you further.</div><img src='//consumercarefaq.lrsdedicated.com/dyn/_dmp_assets/images/faqdemoimages0006layer-13.jpg' title='test sport' />",

  "author": "Consumer Care Team",

  "meta_tags": {

    "faq_type": ["Image"],

    "faq_keyword": ["All", "E-Commerce"]

  }
}, {
  "question": "Where can I buy the Lucozade Sport water bottles and coolers?",

  "answer": "\n\n\n\n\n\n\n\n<p class=\"p1\">The hardware range of Lucozade Sport equipment will be available excluisively online from the Lucozade Sport Shop...