加载微调器 typeaheadjs 猎犬标签输入

Posted

技术标签:

【中文标题】加载微调器 typeaheadjs 猎犬标签输入【英文标题】:Loading spinner typeaheadjs bloodhound tagsinput 【发布时间】:2020-08-09 19:24:09 【问题描述】:

我已经设置了一个带有 Bloodhound 和 tagsinput 的自动完成搜索表单。

它在远程中运行良好,但使用 Wordpress API 显示建议大约需要 1 或 2 秒。

我想在输入中添加一个加载微调器。这样一来,人们就会清楚他们必须等待建议加载。

我知道这篇文章https://github.com/twitter/typeahead.js/issues/166,但它只是关于 typeaheadjs 而不是 tagsinput。而且老实说,我在使用 Bloodhound 和 tagsinput 时不太了解 typeaheadjs 的用途。

我使用 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】:

感谢这篇非常好的帖子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()
                ]
        );

【讨论】:

以上是关于加载微调器 typeaheadjs 猎犬标签输入的主要内容,如果未能解决你的问题,请参考以下文章

使用 ajax 加载内容时在 Bootstrap 选项卡之间显示微调器

在加载图像数组时反应加载微调器

处于加载状态时如何向按钮添加微调器图标?

Ionic 2 / Ionic 3 / Ionic 4:(懒惰)加载图片的微调器

如何将多个用户输入保存到微调器?

每当我选择微调器值时如何隐藏标签?