Twitter Typeahead with remote json not work

Question

My init of twiter typeahead is:

 var cityList = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            remote: {
                url: $('#citySearchInput').attr('data-src')+'?query=%QUERY',
                wildcard: '%QUERY',
                dataType: "json",                    
                ajax : {                       
                    type: "GET"
                }
            }
        });
     $('#citySearchInput').typeahead({
                minLength: 2,
                highlight: true,
                hint: true
            }, {
            display: 'value',
            source: cityList,
            limit:25,
            valueKey: 'query',
            templates: {
                empty: function(data){
                    console.log(data);
                    return 'empty';
                },
                suggestion:  function(data) {
                    console.log(data);
                    return '<p><a href="'+data.link +'">' + data.value + '</a></p>';
                }
            }
        });

It's work with answer from backend as:

[{"link":"\/en\/forecast\/Iran\/Ostan-e-Lorestan\/Defkandar","value":"Defk\u0101ndar, Ost\u0101n-e Lorest\u0101n(Iran)"},{"link":"\/en\/forecast\/Iran\/Ostan-e-Lorestan\/Defkundar","value":"Defk\u016bndar, Ost\u0101n-e Lorest\u0101n(Iran)"}]

But when returned more data, for example 8 items - always write "empty" and in suggestion data 0. I was fixed it after set limit in js from 25 to 100, but i don't think that is a correct way.

Answer 1

For my use case, the backend is limited to returning 25 items. I had typeahead set to limit:25 because that seems pretty sensible. I noticed I got results displayed when I had less than 25 results returned in the JSON, but nothing happened when the JSON had all 25 items.

I added an empty template after reading your question and it was triggered every time I had 25 results. Might be an off-by-one error in the code? I haven't investigated it.

I upped the limit to 50 for Typeahead knowing the backend ensures I'll never see more than 25. Everything works as expected now.

This is mostly a me too post which tries to highlight that your workaround is effective in a situation where the backend ensures a limit.