如何使用 ajax 自动完成引导标记字段？答案

【问题标题】：How to autocomplete bootstrap tokenfield with ajax?如何使用 ajax 自动完成引导标记字段？
【发布时间】：2013-10-17 13:29:32
【问题描述】：

我想将令牌字段用于引导程序：http://sliptree.github.io/bootstrap-tokenfield/，但我似乎找不到任何有关如何使用 AJAX 进行操作的文档。我有一个 .php 文件，其中包含像 {"Hello", "Helium", "Hell"} 这样的 json 数据，我希望它是自动完成值。请注意，.php 文件只返回与输入内容相似的值。谁能找到办法做到这一点？任何帮助将不胜感激。我只想使用那个华丽的引导标记字段来自动完成标签，如果那里不存在这个词，就禁止自动完成。

谢谢。

【问题讨论】：

标签： php jquery ajax twitter-bootstrap autocomplete

【解决方案1】：

您需要通过jquery-ui 或来自twitter 的typeahead 实现自动完成，然后应用特定选项。

$('#activity_tag_tokens').tokenfield({
  typeahead: {
    prefetch: '/tags.json',
    remote: '/tags.json?q=%QUERY',
  }
});

【讨论】：

请问如何使用 Jquery Ui 做同样的事情？你能提供这个的jquery Ui版本吗？谢谢
John，下面是一个如何使用对我有用的 JQueryUI 执行此操作的示例：itsolutionstuff.com/post/…（我知道这是一个旧参考，但这可能会帮助其他发现此问题的 Google 员工）

【解决方案2】：

没关系……我找到了解决办法

$('#tokenfield1').tokenfield();
            var mots_cles = "";
            $.each(e.valeur_tableau_infos_tutoriel.Mots_cles, function  (index,value){
                mots_cles += value.mots_cles+',';
            })
            $('#tokenfield1').tokenfield('setTokens', mots_cles)
        }

【讨论】：

【解决方案3】：

引导令牌字段 - 使用 ajax 远程调用的预输入自动完成

先决条件：

= stylesheet_link_tag 'sales_crm/tokenfield-typeahead.css'
= stylesheet_link_tag 'sales_crm/bootstrap-tokenfield.css'


%script{:src => "//code.jquery.com/ui/1.10.3/jquery-ui.js", :type => "text/javascript"}
= javascript_include_tag  "sales_crm/bootstrap-tokenfield.js"
= javascript_include_tag  "sales_crm/typeahead.bundle.min.js"

在 HAML 查看文件中：

%input#tokenfield-typeahead.form-control.add_locality_data{:type => "text", :value => "", :identifier=> "Locality"}/

1) 初始化 BloodHound 搜索引擎

    var engine = new Bloodhound({
                remote: {
                    url: '/sales_crm/leads/get_lead_associated_info?query=%QUERY&model_class='+$('.add_locality_data').attr("identifier"),
                    filter: function (response) {
                        var tagged_user = $('#tokenfield-typeahead').tokenfield('getTokens');
                        console.log(tagged_user)
                        return $.map(response.leads, function (user) {
                            console.log(user)
                            var exists = false;
        //                    console.log("velava saranam");
                            for (i=0; i < tagged_user.length; i++) {
                                if (user.value == tagged_user[i].value) {
                                    var exists = true;
                                }
                            }
                            if (!exists) {
                                return {
                                    value: user.value,
                                    label: user.label
                                };
                            }
                        });
                    }
                },
                datumTokenizer: function (d) {
                    return Bloodhound.tokenizers.whitespace(d.value);
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace
            });

engine.initialize();

2）然后初始化tokenfield函数

$('#tokenfield-typeahead').tokenfield({
    delimiter: false,
    typeahead: [
           {
            name: 'users',
            displayKey: 'label',
            source: engine.ttAdapter()
        }
    ]
})
    .on('tokenfield:createtoken', function (e) {
        var existingTokens = $(this).tokenfield('getTokens');
        if (existingTokens.length) {
            $.each(existingTokens, function(index, token) {
                console.log(token)
                if (token.value === e.attrs.value) {
                    e.preventDefault();
                }else{
                    console.log(e.attrs.value)
                }
            });
        }else{
            console.log(e.attrs.value)
        }
    });

【讨论】：