Предварительная выборка Twitter typeahead.js 0.11.1 не работает

Я пытаюсь предварительно загрузить всю базу данных JSON (55 КБ) для ее использования с typeahead.js 0.11.1. Я боролся с этим целый день, и я нашел документацию typeahead.js довольно простой в этом отношении.

мой JSON выглядит примерно так:

[{
    "id": 1,
    "name": "Green"
}, {
    "id": 2,
    "name": "Red"
}, {
    "id": 3,
    "name": "Blue"
}]

и джаваскрипт:

$(function() {

    var tagSuggestion = new Bloodhound({
        datumTokenizer: function(d) {
            return Bloodhound.tokenizers.whitespace(d.name);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 10,
        prefetch: {
            url: 'ajax.json-colors.php'
        }
    });

    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 2
    }, {
        name: 'tagSuggestion',
        displayKey: 'name',
        source: tagSuggestion.ttAdapter()
    });

});

Я не знаю, что я делаю неправильно, но typeahead не работает с предварительной выборкой.


javascript jquery twitter-typeahead
person denoise    schedule 25.08.2016    source источник
comment
Возможно, вы захотите переименовать файл json в ajax.json-colors.json вместо ajax.json-colors.php и убедитесь, что путь существует. Проверьте, нет ли ошибок консоли.   -  person Arathi Sreekumar    schedule 25.08.2016
comment
@ArathiSreekumar база данных должна быть динамической, и нет проблем с получением данных в объект javascript.   -  person denoise    schedule 25.08.2016
comment
Итак, вы можете видеть данные, поступающие во внешний интерфейс? Предварительная выборка делает запрос ajax?   -  person Arathi Sreekumar    schedule 25.08.2016
comment
@ArathiSreekumar да, данные поступают, и предварительная выборка выполняет запрос ajax   -  person denoise    schedule 26.08.2016
comment
Последний раз плагин обновлялся около 2 лет назад, я бы посоветовал перейти на autocomplete.js.   -  person SeinopSys    schedule 12.11.2016

Ответы (2)


arrow_upward
0
arrow_downward

Может быть, что-то в этом роде может сработать:

var tagSuggestion = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: 'ajax.json-colors.php',
        filter: function (data) {
            //console.log(data.response) --> see if this is your data in example above
            return $.map(data.response, function (tags) {
                return {
                    name: tags.name
                };
            });
        }
    }
});

Это предполагает, что данные, возвращаемые в предварительной выборке, имеют форму объекта ответа с данными в нем. Возможно, потребуется изменить в зависимости от того, что такое data, который передается фильтру.

Это если ответ ajax является значением ключа, а ключ является «ответом». Без рабочей скрипки я могу только догадываться о проблемах.

person Arathi Sreekumar    schedule 26.08.2016

arrow_upward
0
arrow_downward

наконец, проблема была решена с помощью удаленной функции и изменения моего кода на следующее:

var tagSuggestion = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'ajax.json-colors.php?query=%QUERY',
        wildcard: '%QUERY'
    }
});

$('.typeahead').typeahead({
    minLength: 2,
    highlight: true
},
{
    name: 'search',
    display: 'value',
    source: tagSuggestion
});

кажется, что typeahead не работает с файлами php в качестве источника предварительной выборки и принимает только текстовые файлы json.

person denoise    schedule 12.11.2016