Thread: Typeahead in Java

Hello all, i have been trying to put a Typeahead on my Shopify home page for ages. I have come across many problems but most of which i have managed to overcome.

The typeahead i want works perfectly in JSFiddle: jsfiddle.net/2RNFj/3/

In order to get certain parts of the code to work in Shopify i was advised to make a few changes like add jquery and insert my java code between:

<script type="text/javascript">
$(function () {
                    //.......     
  )};
</script>

After listening to advice from others, still can not get my final code to work. Below is my code and screenshots of the current errors:

{{ 'jquery-3.2.1.js' | asset_url | script_tag }}
 
{{ 'typeahead.bundle.js' | asset_url | script_tag }}
 
{{ 'bloodhound.js' | asset_url | script_tag }}
 
{{ 'examples.css' | asset_url | stylesheet_tag }}
 
{{ 'handlebars.js' | asset_url | script_tag }}
 
 
 
{{ content_for_index }}
 
<div id="custom-templates">
  <input class="typeahead" type="text" placeholder="companies">
 </div>
 
 
 
<script type="text/javascript">
$(function () {
  var links = [{name: "abc", link: "http://abc.com"}, 
             {name: "nbc", link: "http://nbc.com"}];
 
var source = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: links
});
 
source.initialize();
 
$('#custom-templates .typeahead').typeahead(null, {
  name: 'matched-links',
  displayKey: 'name',
  source: source.ttAdapter(),
  templates: {
    empty: [
      '<div class="empty-message">',
      'unable to find any company that match current query',
      '</div>'
    ].join('\n'),
      suggestion: Handlebars.compile('<p><a href="{{link}}">{{name}}</a></p>)'
  )}};
 
  )};
</script>

When comparing it to the code in JSFiddle, the there might be a problem with the 'Bloodhound' & 'Handlebars' section.

Does anyone have any ideas?
Thank you in advance.