Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

typeahead.js not returning all results

I'm having troubles getting typeahead.js to return/render all my results on my page. Here is my code:

var places = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/api/place/?country={{ country.id }}&name=%QUERY'
        , transform: function (data) {
            return data.response;
        }
        , wildcard: '%QUERY'
    }
});

var selected = false;
$('.typeahead-place').typeahead({
    hint: true,
    highlight: true,
    minLength: 2
},
{
    name: 'places',
    displayKey: function (obj) {

        if (obj.url != null && obj.url.length && (obj.street == null || obj.street.length == 0)) {
            return obj.name + " (Online store)";
        }

        return obj.name + " (" + obj.street + ", " + obj.city + ", " + obj.postcode + ")";
    },
    source: places
});

Example query of Punn gives me back the JSON from the server as:

{
    "response": [
            {
                "id": "4",
                "name": "Punnitse ja Säästä 2",
                "street": "Simonkenttä, Simonkatu 9",
                "city": "Helsinki",
                "postcode": "00100",
                "url": "http://www.punnitse.fi/"
            },
    {
        "id": "12",
        "name": "Punnitse ja Säästä 3",
        "street": "Simonkenttä, Simonkatu 9",
        "city": "Helsinki",
        "postcode": "00100",
        "url": "http://www.punnitse.fi/"
    },
    {
        "id": "13",
        "name": "Punnitse ja Säästä 4",
        "street": "Simonkenttä, Simonkatu 9",
        "city": "Helsinki",
        "postcode": "00100",
        "url": "http://www.punnitse.fi/"
    },
    {
        "id": "9",
        "name": "Punnitse ja Säästä Kamppi",
        "street": "Simonkenttä, Simonkatu 9",
        "city": "Helsinki",
        "postcode": "00100",
        "url": "http://www.punnitse.fi/"
    }
    ]
}

Right now this renders as so:

enter image description here

like image 644
Dean Avatar asked Jul 31 '15 13:07

Dean


People also ask

How do you set a value in typeahead?

jQuery#typeahead('val', val) Sets the value of the typeahead. This should be used in place of jQuery#val.

What is a typeahead input?

The typeahead input fields are very popular in modern web forms. The main purpose of using typeahead is to improve the user experience by supplying hints or a list of possible choices based on the text they've entered while filling a form or searching something — like the Google instant search.

What is jQuery typeahead?

The jQuery Typeahead plugin provides autocomplete preview on search inputs similar to google search with builtin options and deep customization. It is a simple clientside library that will improve the user experience on your website search input! The jQuery Typeahead plugin is released under the MIT License.


2 Answers

This appears to be a well-known bug of the new version of typeahead.js. In order to make your code working correctly, you'd rather switch to version 0.10.5 or lower, and slightly transform your code:

var places = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: '/api/place/?country={{ country.id }}&name=%QUERY',
        wildcard: '%QUERY',
        filter: function(data) {      // <-- should use `filter`
            return data.response;
        }
    }
});

places.initialize();                  // <-- initialise suggestion

$('.typeahead-place').typeahead({
    hint: true,
    highlight: true,
    minLength: 2
}, {
    name: 'places',
    source: places.ttAdapter(),       // <-- get adapter as a source
    displayKey: function(obj) {
        // ...
    }
});

DEMO: https://jsfiddle.net/uszcp6j3/


Alternatively, if you want to stick to the latest version, you can apply the following patch, which was released some time ago, to the source code of the typeahead.js.

like image 147
VisioN Avatar answered Sep 24 '22 04:09

VisioN


I just found the answer to this here: https://github.com/twitter/typeahead.js/issues/1232 as supplied by louy:

...
$('.typeahead-place').typeahead({
    hint: true,
    highlight: true,
    minLength: 2,
    limit: Infinity
},
...

...which is to say, you need to set the limit to the Javascript global Infinity property. This totally works!

That said, it's a crime that they haven't patched the code yet—this bug has been known for years now.

like image 32
mpemburn Avatar answered Sep 21 '22 04:09

mpemburn