且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

typeahead.js不返回所有结果

更新时间:2023-02-05 12:31:57

这似乎是typeahead.js的新版本中的>众所周知的错误.为了使您的代码正常工作,您宁愿切换到版本 0.10.5 或更低的版本,并稍微转换一下代码:

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) {
        // ...
    }
});

演示: https://jsfiddle.net/uszcp6j3/ >


或者,如果您希望坚持使用最新版本,则可以应用以下 ,它是在不久前发布的typeahead.js源代码.

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:

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.