Handlebars Custom Template for Twitter Typeahead
<p>I am using <strong>Twitter typeahead</strong> in my application,</p>

<p>My Requirement is, i have json with <strong>three array of objects</strong>, which i want to use in to populate <strong>autosuggestion</strong> on min character length of 3.</p>

<p>I have <strong>handlebars template</strong>, which i compile in my Twitter typeahead(<strong><em>typeahead.bundle.min.js</em></strong>), </p>

<p>the problem i have is the, div in which i am wrapping my <strong>handlebars</strong> template is also becoming part of auto suggestion i mean as in image i have higlighted, which i dont want it to happen <a href="https://i.stack.imgur.com/BoWnv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BoWnv.png" alt="enter image description here"></a>
Expected out put is without that highlighted div.</p>

<p>Please see the JS Bin link for my DOM Structure and JS code
<a href="http://jsbin.com/figuzin/edit?html,js,console" rel="nofollow noreferrer">http://jsbin.com/figuzin/edit?html,js,console</a></p>

<p>and The Json i want to use is 
<a href="https://api.myjson.com/bins/4m8e8" rel="nofollow noreferrer">https://api.myjson.com/bins/4m8e8</a></p>

<p>Please do share any sample code, where you have build <strong>custom template from handlebars</strong> for <strong>twitter typeahead</strong> and able to populate different set of array objects
something like this, the below image show suggestion with three different array of items.
<a href="https://i.stack.imgur.com/AFUVq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AFUVq.png" alt="enter image description here"></a></p>

<p>Thanks in advance, </p>