jQuery自动完成功能可在Jsfiddle上使用，但不能在页面上使用

Question

I have little problem. I can't force jquery autocomplete to work. When I put the code on the jsfiddle everything works. But when started from my Visual Studio 2013 it doesn't.

Below is my code:

<input id="seed_one" type="text" name="seed_one" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var data = ["Boston Celtics", "Chicago Bulls", "Miami Heat", "Orlando Magic", "Atlanta Hawks", "Philadelphia Sixers", "New York Knicks", "Indiana Pacers", "Charlotte Bobcats", "Milwaukee Bucks", "Detroit Pistons", "New Jersey Nets", "Toronto Raptors", "Washington Wizards", "Cleveland Cavaliers"];
        $("#seed_one").autocomplete({ source: data });
    });
</script>

Here you can see it on the jsfiddle: http://jsfiddle.net/8w6fF/

Can anyone explain my what I'm doing wrong?

2 errors I'm getting:

Uncaught ReferenceError: jQuery is not defined Uncaught TypeError object [Object object] has no method autocomplete.

Answer 1

u cannot use links like this

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

u must download the jquery and save it in a folder in your project and then link it to your page..!! the option you used will only work with using internet..!!

and your stylesheet too..!!

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

Answer 2

as Sajad pointed out you should download the jquery and css and save in a folder, but as long as you are using internet its okay.

The main problem with your code is that you are using old version of jquery-ui.

use - http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js

so you final code will look like

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

Answer 3

I Tried The code on my Local browser -

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

I am very sure that you are NOT INCLUDING "jquery-ui.js" That is the reason you are unable to observe the same result.

Include the "jquery-ui.js" source and i am 100% sure that your page works :)

Answer 4

In jsfiddle you are using jQuery UI version 1.9.2, but in your local you are uasing version 1.8.9. Try with the latest version. Hope this will work.

Answer 5

Ok I found solution. VS MVC5 adds their own line with include of Jquery and overwrites my include with this code:

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

which can be found in /shared/_layout

Thats why my code wasn't working while working on jsfiddle.