TypeAhead:错误消息,而不是建议数据

问题描述 投票:0回答:1

我正在使用typeahead库,它正在成功获取数据。但不要将数据加载到建议列表中,而是每次都显示unable to find any company that match current query

这是我的代码:

$('#js-typeahead').typeahead({
    highlight: true,
    minLength: 1
}, {
    displayKey: ['title'],
    source: function(keywords, result) {
        ajaxRequest({
            url: '{{ route("admin.companies.auto-complete") }}',
            dateType: 'json',
            data: {
                keywords: keywords,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                result($.map(response, function(data) {
                    return {
                        'title': data.title,
                        'token': data.token,
                    };
                }));
            }
        });
    },
    templates: {
        empty: [
            '<div class="empty-message">',
                'unable to find any company that match current query',
            '</div>'
        ].join('\n'),
        suggestion: function(data) {
            return '<a href="' + data.token + '">' + data.title + '</a>';
        }
    }
});

这里是获取的数据

Here is the fetched data


[请告诉我我在做什么错。

typeahead empty-list
1个回答
0
投票

[已解决]:这是我的最终代码...

$('.js-typeahead').typeahead({
    hint: false,
    highlight: true,
    minLength: 1
}, {
    displayKey: 'title',
    source: (new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: '{{ route("admin.{$parent['route']}.auto-complete") }}',
            prepare: function (keywords, settings) {
                return $.extend({}, settings, {
                    type: "POST",
                    contentType: "application/json; charset=UTF-8",
                    data: JSON.stringify({
                        keywords: keywords,
                        _token: '{{ csrf_token() }}'
                    })
                });
            }
        }
    })),
    templates: {
        empty: '<div class="empty">No result found</div>',
        suggestion: function (data) {
            return '<div>' + data.title + '</div>';
        }
    },
}).on('typeahead:asyncrequest', function(event) {
    $('.js-typeahead').before('<i class="fas fa-spinner fa-spin loading"></i>');
}).on('typeahead:asyncreceive', function(event) {
    $('.js-typeahead').prev('.loading').remove();
}).on('typeahead:selected', function(event, selection) {
    // window.location.href = selection.token;
});

我希望这可以对某人派上用场...

© www.soinside.com 2019 - 2024. All rights reserved.