无法通过远程使用 MVC 5 获取 Typeahead.js

Question

我不知道我做错了什么，但我无法在我的 MVC 5 应用程序中进行输入。我通过 NuGet 安装了所有东西，我的视图包括 @Scripts.Render("~/bundles/typeahead")，它在查看视图源时正确呈现。所以问题不在于缺少依赖项。

当我开始输入时，我没有看到任何下拉菜单，并且使用 Fiddler 我没有看到对我设置的用于提取数据的遥控器进行的任何调用。

在我看来，这是附加预输入的那一行：

@Html.TextBoxFor(m => m.MainInfo.CompanyName, 
         new { @class = "form-control typeahead", id = "comp-name", autocomplete="off" })

这是我的脚本中配置 typeahead 和 Bloodhound 的部分：

$(document).ready(function() {

     var clients = new Bloodhound({
         datumTokenizer: function (datum) {
             return Bloodhound.tokenizers.whitespace(datum.value);
         },
         queryTokenizer: Bloodhound.tokenizers.whitespace,
         remote: {
             url: "/info/client?like=%QUERY",
             wildcard: '%QUERY',
             filter: function (clients) {
                 return $.map(clients, function (client) {
                     return {
                         value: client.Name,
                         clientId: client.Identifier
                     };
                 });
             }
         }
    });

    clients.initialize();

    $('#comp-name').typeahead(null,
    {
        display: 'value',
        minLength: 1,
        source: clients.ttAdapter(),
        templates: {
            empty: "Looks like a new client...",
            suggestion: Handlebars.compile("<p><b>{{value}}</b> - {{clientId}}</p>")
        }
    });
});

我的 javascript 中是否存在错误配置？我使用了一些教程以及他们自己的文档，但我无法弄清楚我在这里做错了什么。几乎感觉它没有正确初始化，但没有抛出任何错误。

注意：仅供参考，我也在使用 Bootstrap 3，以防万一发生任何变化。

编辑：这是我的@section Scripts：

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/typeahead")
<script src="@Url.Content("~/Scripts/handlebars.min.js")"></script>
<script src="@Url.Content("~/Scripts/ProjectSetupFormScripts.js")"></script> <-- this is where typeahead is set up

Answer 1

这对我有用：

JS

@section Scripts {
<script type="text/javascript">
    $(function () {
        SetupTipeahead();
    });
    function SetupTipeahead() {
        var engine = new Bloodhound({
            remote: {
                url: '/Employees/AllEmployees',
                ajax: {
                    type: 'GET'
                }
            },
            datumTokenizer: function (d) {
                return Bloodhound.tokenizers.whitespace(d.FullName);
            },
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });

        engine.initialize();

        $('#FullName').typeahead(null, {
            displayKey: 'FullName',
            source: engine.ttAdapter(),
            templates: {
                empty: [
                                    '<div class="empty-message">',
                                    'No match',
                                    '</div>'
                ].join('\n'),
                suggestion: function (data) {
                    return '<p class="">' + data.FullName + '</p><p class="">' + data.ManNumber + '</p>';
                }
            }
        });
    }
</script>

EmployeesController 有以下JsonResult

        public JsonResult AllEmployees()
    {
        return Json(db.Employees.ToList(),JsonRequestBehavior.AllowGet);
    }

Answer 2

您好，尝试将您的脚本包装在 @section scripts {} 中，这会将脚本放在底部 </body> 标记之前，并确保您在加载包之前没有调用该函数。

@section scripts {
<script>
$(document).ready(function() {

     var clients = new Bloodhound({
         datumTokenizer: function (datum) {
             return Bloodhound.tokenizers.whitespace(datum.value);
         },
         queryTokenizer: Bloodhound.tokenizers.whitespace,
         remote: {
             url: "/info/client?like=%QUERY",
             wildcard: '%QUERY',
             filter: function (clients) {
                 return $.map(clients, function (client) {
                     return {
                         value: client.Name,
                         clientId: client.Identifier
                     };
                 });
             }
         }
    });

    clients.initialize();

    $('#comp-name').typeahead(null,
    {
        display: 'value',
        minLength: 1,
        source: clients.ttAdapter(),
        templates: {
            empty: "Looks like a new client...",
            suggestion: Handlebars.compile("<p><b>{{value}}</b> - {{clientId}}</p>")
        }
    });
});
</script>
}