Question

我不知道我做错了什么，但我不能在我的MVC 5应用程序中使用typeahead。我通过NuGet安装了所有内容，我的视图包含@Scripts.Render("~/bundles/typeahead")，在查看视图源时可以正常呈现。所以问题不在于缺少依赖关系。

当我开始输入时，我没有看到任何下拉，并且使用Fiddler我没有看到任何调用正在我设置的拉取数据的遥控器。

以下是我视图中附加了typeahead的行：

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

无法获取Typeahead.js使用MVC 5 Over Remote

2 个答案: