why my typeahead.js does not display the menu on ajax call?

Question

In my laravel application I'm facing a problem with typeahead.js autocomplete when using source with ajax, the suggestion menu does not get displayed, however when the source refers to a div with all my tags (separated by comma) works perfectly, I mean this way it will work:

    <div id="available-tag-data" class="tag-data">
     adventure, literature, poertry               
   </div>

and inside JS:

source: substringMatcher(parseTags('available-tag-data'))

and this way it doesn't show the suggestion menu (no console erorrs):

    source: function (query, result) {

                        $.ajax({
                            url: "/get-tag",
                            data: 'query=' + query,
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                console.log(data)

                                let myData = []
                                for (let i = 0; i < data.options.length; i++) {
                                    myData.push(data.options[i].name)
                                }

                                console.log(myData)

                                result($.map(myData, function (item) {
                                    return item
                                })

)
                        }
                    })
                }

the json retrieved by "/get-tag" url:

"{"options":[{"name":"adventure"},{"name":"literature"},]}"

also this does not work:

success: function (data) {
                            console.log('data', data)

                            var newData = [];
                            $.each(data, function () {
                                newData.push(this.name);
                            });

                            result(newData);

                            return;

}

response:

["adventure","literature"]

Sounds like if content is already preloaded such as in the first example or in an already populated JS array it will work (I already tried to override the array when the new data comes with ajax), but not sure, what am I doing wrong? how the json response should be?? thanks

I think your source function needs to `return` something for it to populate the typeahead. — newUserName02, Jul 01 '19 at 22:37
Have you tried these? https://stackoverflow.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example — newUserName02, Jul 01 '19 at 22:38
yes, if you notice in the first example I am returning an item, also I tried the solution in the link you gave me, do you have another idea? — user2580401, Jul 01 '19 at 23:34
Your `source` function isn't returning anything. You are returning an item from inside `$.map` which is nested way inside `source`-> `$.ajax` -> `success` -> `result`. You need to return the results of the AJAX request from the `source` function itself. — newUserName02, Jul 01 '19 at 23:51
I got that example from here: https://phppot.com/jquery/bootstrap-autocomplete-with-dynamic-data-load-using-php-ajax/ — user2580401, Jul 02 '19 at 00:45

score 0 · Answer 1 · answered Jul 02 '19 at 03:07

Finally I pull off, the problem was this piece of code:

{
                hint: true,
                highlight: true,
                minLength: 1,
            },

before resource code

I mean this was my code before:

$('.taggle_input').typeahead(
            {
                hint: true,
                highlight: true,
                minLength: 1,
            },
            {
                name: 'tags',
                //source: substringMatcher(parseTags('available-tag-data'))
                //source: substringMatcher(myTags)
                source: function (query, result) {
                    console.log(query)
                    $.ajax({
                        url: "/server2",
                        data: 'query=' + query,
                        dataType: "json",
                        type: "post",
                        success: function (data) {
                            console.log(data)
                            result($.map(data, function (item) {
                                return item;
                            }))
                        }
                    })
                }

            })

but now it works, hope this helps someone if the future

why my typeahead.js does not display the menu on ajax call?

1 Answers1