在Laravel上使用Ajax调用自动完成和弹性搜索进行选择

时间:2018-02-11 07:47:55

标签: ajax elasticsearch laravel-5 autocomplete selectize.js

我尝试在Laravel 5.5上使用elastiquent进行Facebook风格用户搜索,通过在输入字段中键入一些字符来自动完成广告最大用户。 来自Ajax调用的响应返回正确的对象,但在我的js代码中可能有些错误。 这是elasticsearch url http://basketmapp.com/users-list?q=Paolo,作为回应我可以看到该项被正确获取:

enter image description here

这是用于选择的js:

    $(document).ready(function () {
    var topUserSearch = $('.js-user-search');

    if (topUserSearch.length) {
        topUserSearch.selectize({
            persist: false,
            maxItems: 2,
            valueField: 'name',
            labelField: 'name',
            searchField: ['name'],
            options: [],
            render: {
                option: function(item, escape) {
                    return '<div class="inline-items">' +
                        (item.avatar ? '<div class="author-thumb"><img src="' + escape(item.avatar) + '" alt="avatar"></div>' : '') +
                        '<div class="notification-event">' +
                        (item.first_name ? '<span class="h6 notification-friend"></a>' + escape(item.first_name) + '</span>' : '') +
                        '</div>';
                },
                item: function(item, escape) {
                    var label = item.first_name;
                    return '<div>' +
                        '<span class="label">' + escape(label) + '</span>' +
                        '</div>';
                }
            },
            load: function(query, callback) 
            {
                if (!query.length) return callback();
                $.ajax
                ({
                    url: '/users-list',
                    type: 'GET',
                    dataType: 'json',
                    data: 
                    {
                        q: query
                    },
                    error: function() 
                    {
                        callback();
                    },
                    success: function(res) 
                    {
                        callback(res.data);
                    }
                });
            }
        });
    }
});

需要你的帮助!

0 个答案:

没有答案