How to use Typeahead.js 0.10 step-by-step / remote / prefetch / local

Question

• POST for Twitter Typeahead

I have been for 2 days now, trying to understand and have a clear picture on how to use /manage typeahead.js 0.10 in order to use local, remote and fetched data.

Honestly, the bloodhound engine is not clear for me and detailed information on how to manipulate / access json objects and arrays is still a question mark.

I can make the local example to work but anytime I try to use the prefetch or remote options, and besides several ticks, I cannot make to work.

My goal with this post is not to just get an answer to my problem but rather find someone that has the complete knowledge of it and that is able to, in a very simple way, explain step-by step (with examples / jsfiddles - including json examples, to know what actually is being parsed) how this thing works.

I think a lot a people is looking forward to understand it and this will be a great great contribution (as other detailed posts we know exist).

I imagine this is hard-work.

Thanks in advance for your contributors.

Following the suggestion below. My simple example.

JSON file

   [
    {   "name": "Pink Floyd",
        "Album": "The Best Of Pink Floyd: A Foot In The Door",
        "Label": "EMI UK",
        "Tracks":"Hey You, See Emily Play, The Happiest Days Of Our Lives, Another Brick in The Wall (Part 2), Have a cigar, Wish You Where Here, Time, The Great Gig in the Sky, Money, Comfortably Numb, High Hopes, Learning to Fly, The Fletcher Memorial Home, Shine On You Crazy Diamond, Brain Damage, Eclipse" ,
        "Price": "16.40",
        "Genre": "Rock"

    },
    {
        "name": "Depeche Mode",
        "Album": "A Question Of Time",
        "Label": "Mute",
        "Tracks":"A Question Of Time, Black Celebration, Something To Do, Stripped, More Than A Party, A Question Of Time(extended), Black Celebration" ,
        "Price": "4.68" ,
        "Genre": "Rock"
    },
    {
        "name": "Placebo",
        "Album": "Street Halo/Kindred",
        "Label": "Hyperdub Japan",
        "Tracks":"Street Halo, NYC, Stolen Dog, Kindred, Loner, Ashtray Wasp" ,
        "Price": "14.06",
        "Genre": "Future Garage"

    }
  ]

Typeahead script

  <script>

  var products = new Bloodhound({
    datumTokenizer: function(d) {return d.name; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://localhost/dh/js/products.json'


  });


  products.initialize();

  $('.test1').typeahead({
    highlight: true
  },
  {
    name: 'products',
    displayKey: 'num',
    source: states.ttAdapter()

  });

  </script>

HTML

   <script type="text/javascript" src="http://localhost/dh/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/bootstrap.js"></script>
<script type="text/javascript" src="http://localhost/dh/js/typeahead.bundle.js"></script>

<div class="search_content">
    <input class="test1" type="text" placeholder="product">
</div>

Unclinch

I don't like typeahead, so try using brianreavis.github.io/selectize.js i think more easier and rich library – Glauce

why not show what you've tried? – Maund

First, change your display key from num to a field in your structure, eg name. Second. change 'prefetch' to 'remote'. Not sure why the second change works for me, but prefetch is broken when I try it like you have. – Footrope

I have to agree with you that this shouldn't be difficult to get to work but for the most part, except for the simplest examples, it just work. The documentation is very confusing, perhaps assumes too much, doesn't explain areas that need explanation, etc. I think I'll check out selectize.js. – Atlantes

Answer 1

I just spent some days trying to get this to work my self, and I totally agree that its not intuitive. In particular there was one thing on the typeahead page about Bloodhound that try as I might just didn't work. For example the following line:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value') -- would always yield an error because obj didnt exist.

For the datumTokenizer use the following form(where "DisplayText" is the name of the property in your object that contains the text that will be displayed):

function (d) {
            return Bloodhound.tokenizers.whitespace(d.DisplayText);
        }

and remember when you create the typeahead set the displayKey to the name of the property in your collection that has the text data you want to display. For me this was always the same as the property I wanted to tokenize - so my typeahead statement looked like the following:

$('#my-typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 3
        },
    {
        name: 'someName',
        displayKey: 'DisplayText',
        source: myBloodhound.ttAdapter()
    }

Jongjongleur

Answer 2

change to:

source : products.ttAdapter()

Keratose

Answer 3

The accepted answer, although correct at its time, is not of much use given that typeahead 0.10 is long outdated. Current version is 1.2.1 (as of 2018)

So answering the original question,
Here's a reference tutorial that has step by step explanation of using Typeahead with Bloodhound (local, prefetch, remote and a combination of these) with JS fiddles based on the still maintained fork - Typeahead v1.2.1

Otte