为什么我的 typeahead.js 不显示 ajax 调用的菜单？答案

【问题标题】：why my typeahead.js does not display the menu on ajax call?为什么我的 typeahead.js 不显示 ajax 调用的菜单？
【发布时间】：2019-07-01 22:10:29
【问题描述】：

在我的 laravel 应用程序中，当使用带有 ajax 的源时，我遇到 typeahead.js 自动完成的问题，建议菜单不会显示，但是当源引用带有我的所有标签（用逗号分隔）的 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
                                })

)
                        }
                    })
                }

"/get-tag" url检索到的json：

"{"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响应应该如何？谢谢

【问题讨论】：

我认为你的源函数需要return 一些东西来填充预输入。
你试过这些吗？ stackoverflow.com/questions/9232748/…
是的，如果您在第一个示例中注意到我正在退回一个项目，我也尝试了您提供给我的链接中的解决方案，您还有其他想法吗？
您的 source 函数没有返回任何内容。您正在从 $.map 内部返回一个项目，该项目嵌套在 source-> $.ajax -> success -> result 内部。您需要从 source 函数本身返回 AJAX 请求的结果。
我从这里得到了这个例子：phppot.com/jquery/…

标签： jquery ajax laravel typeahead.js

【解决方案1】：

最后我成功了，问题出在这段代码上：

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

            })

但现在可以了，希望将来能对某人有所帮助

【讨论】：