How to get JQuery-UI to work with ASP.NET MVC6?

Question

I have just started with MVC6 (RC), have created a project based on the standard template to MVC6 RC and desperately try to bring JQuery-UI to work. I have overtaken the following example from the JQuery-UI page in one of my views:

<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>
<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>

The label (and the "TextBox") is shown, but the autocomplete don’t work (if I type in some text, nothing happens). JQuery (base) is installed per default (in the standard template). First, I have added the JQuery-UI NuGet package (what seems to be wrong). Then I have added the JQuery-UI package also in Bower (what I think, should be the new way).

I also have tried to add the references:

<!-- jQuery UI CSS Reference -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

in my view (what don't solve the problem).

What is the correct way to add JQuery-UI in a MVC 6 (RC) project and bring the example to work? Update to be concret:
The problem was not the example-code above (nothing wrong with it) the problem only was to reference the JQuery correct (in my case for MVC6 RC).
So you can see the solution in general in the first answer and - specific for my case - in my own answer.

Answer 1

It works now. In MVC6 RC,the scripts have to be added in _Layout.cshtml, but under the environment sections:

 <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        @* Added for JQueryUI (Debug) *@
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        @* Added for GoogleMaps (debug)*@
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
        @* Added for JQueryUI (Staging / Hosting (including Self-hosting) *@
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        @* Added for GoogleMaps (Staging / Hosting (including Self-hosting)*@
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </environment>

So my posted example-code works, since I have changed that. Note: You also have to add the references under environment names="Staging,Production", else it don't work outside of VS.

Answer 2

This code should work fine with the information you provided. See the working fiddle.

Make sure to double check all these things

1) You have loaded jQuery, jQuery UI and the relvant CSS needed. jQuery should be loaded before loading the jQuery UI as it has a dependency on jQuery.

The script which enables the autocomplete should be after loading the above 2 libraries.

2) Check for other script errors in your browser console. If you have some script errors, your other remaining js code won't be executed :)

3) If you are using a Layout and you are trying to enable the autocomplete plugin from a page which uses this layout, make sure to put your scripts inside the @section scripts block so that it executes after we load our libraries( that is how we will/should specify the script execution order in Layout file. See the below example)

Layout (_Layout.cshtml)

<body>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 @RenderSection("scripts", required: false)
</body>   

Your specific page ( Ex : index.cshtml)

@section scripts
{
<script type="text/javascript">

    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Scheme"
        ];

        $("#tags").autocomplete({
            source: availableTags
        });
    });

</script>

}