I have been working in a Spring MVC application and trying to use Twitter Typeahead to show suggestions. The problem however is that although the suggestions are fetched from the server correctly but the suggestion box is not showing up at all. The same code had worked previously but is not working now.

my javascript code is:

var skillSuggestions=new Bloodhound({
        datumTokenizer:Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer:Bloodhound.tokenizers.whitespace,

        remote:{
            url:"/tags/get.html/?searchTerm=%QUERY",
            filter:function(x){
                return $.map(x,function(item){
                    return{value:item.name};
                });
            },
            wildcard:'%QUERY',

        }
    });

    skillSuggestions.initialize();

    $('#skill-name').typeahead({
        hint:true,
        highlight:true,
        minLength:1
    },{
        name:'value',
        displayKey:'value',
        source:skillSuggestions.ttAdapter()
    })

and for the input 'j' the received json response is:

[{"id":"56d546f5535a3c819f080558","name":"Java","category":"Information Technology","subCategory":"Programming/Software","createdDate":1456817909648,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93f8e535a773c1f8cc846","name":"Javascript","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078158043,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93fa2535a773c1f8cc847","name":"JQuery","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078178030,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93fb7535a773c1f8cc848","name":"JavaSE","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078199012,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56e226a47b49d4215eaefa9a","name":"javahhhh","category":"hhhhh","subCategory":"jjjjjj","createdDate":1457661604324,"updatedDate":null,"createdBy":null,"modifiedBy":null}]

I want to display the field name in the suggestions. Am I missing something? Please help. I looked at here,here,here and many more but couldn't get what went wrong.

I have been working in a Spring MVC application and trying to use Twitter Typeahead to show suggestions. The problem however is that although the suggestions are fetched from the server correctly but the suggestion box is not showing up at all. The same code had worked previously but is not working now.

my javascript code is:

var skillSuggestions=new Bloodhound({
        datumTokenizer:Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer:Bloodhound.tokenizers.whitespace,

        remote:{
            url:"/tags/get.html/?searchTerm=%QUERY",
            filter:function(x){
                return $.map(x,function(item){
                    return{value:item.name};
                });
            },
            wildcard:'%QUERY',

        }
    });

    skillSuggestions.initialize();

    $('#skill-name').typeahead({
        hint:true,
        highlight:true,
        minLength:1
    },{
        name:'value',
        displayKey:'value',
        source:skillSuggestions.ttAdapter()
    })

and for the input 'j' the received json response is:

[{"id":"56d546f5535a3c819f080558","name":"Java","category":"Information Technology","subCategory":"Programming/Software","createdDate":1456817909648,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93f8e535a773c1f8cc846","name":"Javascript","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078158043,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93fa2535a773c1f8cc847","name":"JQuery","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078178030,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56d93fb7535a773c1f8cc848","name":"JavaSE","category":"Information Technology","subCategory":"Programming / Software","createdDate":1457078199012,"updatedDate":null,"createdBy":"bob","modifiedBy":null},{"id":"56e226a47b49d4215eaefa9a","name":"javahhhh","category":"hhhhh","subCategory":"jjjjjj","createdDate":1457661604324,"updatedDate":null,"createdBy":null,"modifiedBy":null}]

I want to display the field name in the suggestions. Am I missing something? Please help. I looked at here,here,here and many more but couldn't get what went wrong.

• javascript
• jquery
• json
• typeahead.js

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Mar 11, 2016 at 9:58 Abhisek LamsalAbhisek Lamsal 46311 gold badge55 silver badges1616 bronze badges 11

• what does this do?? source:skillSuggestions.ttAdapter() – Rajshekar Reddy Commented Mar 11, 2016 at 10:31
• I think that links Typeahead and Bloodhound. The documentation is not clear – Abhisek Lamsal Commented Mar 11, 2016 at 11:00
• the source is the actual point where it shows you the data when you are typing. I guess this is twitter bootstrap type ahead. check if its this one twitter.github.io/typeahead.js/examples . if so then you must implement the substringMatcher function to return you the data to be shown as you type along – Rajshekar Reddy Commented Mar 11, 2016 at 11:03
• @Reddy not exactly. The substringMatcher is intended to be a demo for using a local typeahead datasource. – trenthaynes Commented Mar 11, 2016 at 17:03
• @AbhisekLamsal can you put a console.log statement in your filter function and verify what is happening in there? filter:function(x){ return $.map(x,function(item){ console.log(item.name); return{value:item.name}; }); } – trenthaynes Commented Mar 11, 2016 at 17:04

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 5

The issue is with your datum tokenizer. You're tokenizing in the key value in the response objects, but that key doesn't exist in your response. The obj.whitespace tokenizer accepts a list of object keys to tokenize.

Change this:

datumTokenizer: Bloodhound.tokenizers.obj.whitespace("Value"),

to this (for example):

datumTokenizer: Bloodhound.tokenizers.obj.whitespace("name", "category"),

When you change the tokenizer, it's also necessary to change what's displayed as suggestions and in the selected option. You attempt to do that with this line in the typeahead options:

displayKey:'value',

... but again, you're referencing an object key (value) that doesn't exist. You want the key name.

display: 'name', // This is the object key you wish displayed

I'll show you how I solved it in our implementation. We use an identify function as well as a filter function on the data.

In this case, the data being returned via the web service has an id property and a name property. Those get mapped to the object used for populating the actual typeahead suggestions.

taSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("Value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    identify: function (obj) { return obj.Value; },
    remote: {
        url: "/service/url",
        filter: function (data) {
            if (data) {
                return $.map(data, function (object) {
                    return { Id: object.id, Value: object.name };
                });
            } else {
                return {};
            }
        },
        rateLimitBy: 'debounce',
        rateLimitWait: 400
    }
});

Notice that I map back an Id property and a Value property. Check your case for your property names.