具有两个猎犬数据源的Bootstrap typeahead

时间:2016-07-11 18:50:54

标签: typeahead.js typeahead bootstrap-typeahead bloodhound

我有一段代码在我的页面加载时从后端获取信息

//Bloodhound - Fetches all Project numbers for the current user
        var prsysList = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: {
                url: "../Helper/LookUpProjectNumber/",
                cache: false
            }
        });


        //Typeahead on project numbers
        $('.typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
            {
                name: 'prsys',
                source: prsysList
            });

现在,当用户选择一个值时,我想基于他之前的选择来限制他未来的选择。为此,我有另一个猎犬,它返回一个信息更新列表

//Bloodhound - Fetches all Project numbers for the current user
            var newPrsysList = new Bloodhound({
                datumTokenizer: Bloodhound.tokenizers.whitespace,
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                prefetch: {
                    url: '../Helper/GetCommonPrsys?prsys=' + encodeURIComponent($selectedPrsys),
                    cache: false
                }
            });


            //Init the new variable
            newPrsysList.initialize();

            //Rebind all Typeaheads on project numbers
            $('.typeahead').typeahead({
                hint: true,
                higlight: true,
                minlength: 1
            },
                {
                    name: 'prsys',
                    source: newPrsysList
                });

我的问题是,尽管我的第二只猎犬有可供用户选择的更新数据版本,但该列表并未更新。

我在这里做错了吗?

最佳

1 个答案:

答案 0 :(得分:0)

我最初的想法是简单地创建第二个猎犬变量并用它提供我的预先输入,希望源自动更新(如上面的问题所述)。事实证明并非如此,我的输入数据没有更新。

为了使它工作,我不得不做一个单独的ajax查询,将结果存储到jQuery变量中,使用jQuery变量创建一个bloodhound(使用local)并最终提供我的typeaheads。

$.ajax({
                url: "../Helper/FunctionName",
                data: ({ variable1: $var1 }),
                type: "GET",
                success: function (data) {

                    //Destroy all typeaheads
                    $('.typeahead').typeahead('destroy');

                    var newData= new Bloodhound({
                        datumTokenizer: Bloodhound.tokenizers.whitespace,
                        queryTokenizer: Bloodhound.tokenizers.whitespace,
                        local: data
                    });


                    //Init the new variable
                    newData.initialize();

                    //Rebind all Typeaheads on project numbers
                    $('.typeahead').typeahead({
                        hint: true,
                        higlight: true,
                        minlength: 1
                    },
                        {
                            name: 'data',
                            source: newData
                        });


                    return false;
                },
                error: function (data) {
                    //Destroy all typeaheads
                    $('.typeahead').typeahead('destroy');
                    return false;
                }
            });

IMO这应该花几分钟时间来实现,但我想我要么找不到更简单的解决方案,要么负责打字的人没有实现数据源更新。

祝你好运