Bootstrap typeahead with two bloodhound datasource

Question

I have a piece of code that fetches information from the back-end when my page loads

//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
            });

Now when the user selects a value, I want to based on his previous selection restrict his future choices. To do so, I have another bloodhound that returns me an update list of information

//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
                });

My problem is that despite the fact that my second bloodhound has an updated version of the data available for the user to select, the list isn't being updated.

Am I doing something wrong here?

Best

score 0 · Accepted Answer · answered Jul 27 '16 at 15:59

My initial idea was to simply create a second bloodhound variable and feed my typeahead with it, in the hope that the source would be updated automatically (as explained in the question above). It turns out that it's not the case and my typeaheads data were not updated.

In order to make it work, I had to do a separate ajax query, store the results into a jQuery variable, create a bloodhound (using local) with the jQuery variable and finally feed my 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 this should have taken a few minutes to implement but I guess either I didn't find an easier solution or the people in charge of typeaheads didn't implement the datasource update.

Best of luck

Bootstrap typeahead with two bloodhound datasource

1 Answers1