Question

151

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

rated 0 times [ 154] [ 3] / answers: 1 / hits: 29340 / 11 Years ago, tue, february 11, 2014, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mitchellg

Add To Favorites

Follow

Total Points: 235

Total Questions: 117

Total Answers: 106

Location: Fiji

Member since Wed, Jul 14, 2021

3 Years ago

mitchellg questions

1 Why am I getting Type 'String[] | undefined' is not an array type. for my object variable?

Wed, Mar 3, 21, 00:00, 3 Years ago

1 Using momentJS globally in VueJS 3

Sun, Jan 10, 21, 00:00, 3 Years ago

1 Mock an if/else statement with jasmine - unit testing with Angular/Typescript

Tue, Nov 3, 20, 00:00, 4 Years ago

1 eventlistener beforeunload not working in react

Fri, Aug 21, 20, 00:00, 4 Years ago

1 React Native Paper Button icon size

Fri, Jul 10, 20, 00:00, 4 Years ago

View All

answered 11 Years ago anthonyw · Accepted Answer

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

    }