Загрузка блесны впереди js бладхаунд тегов на входе - PullRequest
Новая
       71

Загрузка блесны впереди js бладхаунд тегов на входе

0 голосов
/ 26 апреля 2020

Я настроил форму автозаполнения поиска с помощью Bloodhound и тегов ввода.

Это хорошо работает в удаленном режиме, но для отображения подсказок с помощью Wordpress API требуется около 1 или 2 секунд.

Я хотел бы хотел бы добавить загрузочный счетчик на вход. Таким образом, людям станет ясно, что им нужно ждать предложений для загрузки.

Мне известно об этом сообщении https://github.com/twitter/typeahead.js/issues/166, но речь идет только о наборе js, а не tagsinput. И если честно, я не очень хорошо понимаю цель typeahead js, когда я использую bloodhound и tagsinput.

Я использую 2 js файлы: typeahead.bundle. js и bootstrap -tagsinput. js

Вот мой рабочий код (без счетчика): 

var transform_terms = function( terms ) {
            return $.map( terms, function( term ) {
                return {
                    id: term.id,
                    name: term.name,
                    count: term.count
                };
            } );
        };

        var localisations = new Bloodhound( {
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace( [ 'name', 'id' ] ),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            identify: function( term ) {
                return {
                    label: term.name,
                    value: term.id,
                };
            },
            sufficient: 5,              
            remote: {
                url: '/wp-json/wp/v2/localisation?_fields=name,id&orderby=count&order=desc&hide_empty=false&search=%QUERY',
                wildcard: '%QUERY',
                transform: transform_terms
            },
            indexRemote: true
        } );
        localisations.initialize();


        $('#localisation').tagsinput({
            itemValue: 'id',
            itemText: 'name',
            maxTags: 5,
            confirmKeys: [13, 9],
            typeaheadjs: {
                name: 'localisations',
                displayKey: 'name',
                source: localisations.ttAdapter()
            }
        });

Может кто-нибудь помочь мне добавить счетчик во время процесса запроса? Заранее большое спасибо!

1 Ответ

0 голосов
/ 26 апреля 2020

Благодаря этому очень хорошему сообщению https://digitalfortress.tech/tutorial/smart-search-using-twitter-typeahead-bloodhound/ я нашел решение, которое кажется надежным. Но я должен сказать, что использование Bootstrap Typeahead не очевидно, а документация плохая ...

Вот мой новый рабочий код: 

var transform_terms = function( terms ) {
            return $.map( terms, function( term ) {
                return {
                    id: term.id,
                    name: term.name,
                    count: term.count
                };
            } );
        };

        var localisations = new Bloodhound( {
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace( [ 'name', 'id' ] ),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            identify: function( term ) {
                return {
                    label: term.name,
                    value: term.id,
                };
            },
            sufficient: 5,

            remote: {
                url: '/wp-json/wp/v2/localisation?_fields=name,id&orderby=count&order=desc&hide_empty=false&search=',
                prepare: function (query, settings) {
                    console.log('load');
                    $("#search-loader").fadeIn();
                    settings.url = this.url + query;
                    return settings;
                },
                filter: function (data) {
                    console.log('finish');
                    $("#search-loader").fadeOut();
                    return data;
                }
            },
            identify: function (response) {
                return response.name;
            },
            indexRemote: true
        } );
        localisations.initialize();


        $('#localisation').tagsinput({
            itemValue: 'id',
            itemText: 'name',
            maxTags: 5,
            confirmKeys: [13, 9],
            typeaheadjs: [{
                    highlight: true
                },{
                    name: 'localisations',
                    displayKey: 'name',
                    source: localisations.ttAdapter()
                }]
        });
...