почему мой typeahead.js не отображает меню при вызове ajax? - PullRequest
Новая
       14

почему мой typeahead.js не отображает меню при вызове ajax?

0 голосов
/ 02 июля 2019

В моем приложении laravel я сталкиваюсь с проблемой автозаполнения typeahead.js при использовании источника с ajax, меню подсказок не отображается, однако, когда источник ссылается на div со всеми моими тегами (разделенными запятой), работает отлично, я имею в виду, что это будет работать: 

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

и внутри JS: 

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

и таким образом он не показывает меню подсказок (без ошибок консоли): 

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

)
                        }
                    })
                }

json, полученный по "/get-tag" url: 

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

также это не работает: 

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

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

                            result(newData);

                            return;

}

Ответ: 

["adventure","literature"]

Похоже, если контент уже предварительно загружен, например, в первом примере или в уже заполненном массиве JS, он будет работать (я уже пытался переопределить массив, когда новые данные поступают с ajax), но не уверен, что я делать неправильно? каким должен быть ответ json ?? спасибо

1 Ответ

0 голосов
/ 02 июля 2019

Наконец я справился, проблема была в следующем куске кода: 

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

до resource код

Я имею в виду, что это был мой код раньше: 

$('.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;
                            }))
                        }
                    })
                }

            })

но теперь это работает, надеюсь, это поможет кому-то, если будущее

...