简单的jQuery自动完成示例在ASP.NET应用程序中不起作用

时间:2014-04-03 18:33:12

标签: javascript jquery asp.net-mvc autocomplete

此主题与我之前的帖子(Using a forced suggestion mechanism using JavaScript and jQuery (ASP.NET MVC project))有关。但是我遇到的问题太大了,无法放在那里。

我试图在我的ASP.NET NVC 4 webapp中使用简单的jQuery自动完成示例(http://jqueryui.com/autocomplete/)。我试过这个:

@model PoliticiOnline.DTO.Question

@{
    ViewBag.Title = "Stel een vraag!";
}

<head>
    <link rel="stylesheet" href="~/Content/Questions.css" type="text/css" />

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    @Scripts.Render("~/bundles/jqueryval")


    <script>
        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>

</head>

<h2>Stel een vraag!</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Vraag</legend>

        <div class="general-question">
            <div class="editor-label">
                @Html.LabelFor(model => model.GeneralQuestion, "Algemene Vraag")
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.GeneralQuestion, new{@class = "general-question-edit"})
                @Html.ValidationMessageFor(model => model.GeneralQuestion)
            </div>
        </div>

        <div class="geadresseerde-politici">
            @Html.Label("Politicus")
            @Html.DropDownListFor(model => model.PoliticianId, (SelectList)ViewBag.PolIds)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Explanation, "Extra Uitleg")
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Explanation, new{@class = "explanation-textarea-edit"})
            @Html.ValidationMessageFor(model => model.Explanation)
        </div>

        <p>
            <input type="submit" value="Indienen!" />
        </p>

        <label for="tags">Tags: </label>
        <input id="tags"/>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

这只是自动填充功能无效(我还没有尝试使用表单发送它,我只想让自动完成工作)。

当我开始在输入字段中输入时,没有任何反应,但它实际上会给出建议。

1 个答案:

答案 0 :(得分:3)

我几乎可以肯定错误:

"Uncaught ReferenceError: Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: jQuery is not defined Uncaught ReferenceError: $ is not defined

表示jquery未加载到您的页面上。

从CDN加载jquery或类似的东西:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

尝试使用:

 $(document).ready(function () { }