Welcome to the Java Programming Forums

The professional, friendly Java community. 21,500 members and growing!

The Java Programming Forums are a community of Java programmers from all around the World. Our members have a wide range of skills and they all have one thing in common: A passion to learn and code Java. We invite beginner Java programmers right through to Java professionals to post here and share your knowledge. Become a part of the community, help others, expand your knowledge of Java and enjoy talking with like minded people. Registration is quick and best of all free. We look forward to meeting you.


Members have full access to the forums. Advertisements are removed for registered users.

Results 1 to 1 of 1

Thread: Typeahead in Java

  1. #1
    Junior Member
    Join Date
    Nov 2017
    Thanked 0 Times in 0 Posts

    Angry 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 () {

    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">
    <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
    $('#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',
          suggestion: Handlebars.compile('<p><a href="{{link}}">{{name}}</a></p>)'

    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.
    Attached Images Attached Images