jquery autocomplete not working_问答_开发者_运维开发者技术经验分享

Could someone please tell me why my code for the jquery autocomplete is not working?

Here is my javascript code.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var data = ["Boston C开发者_开发技巧eltics", "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>

And here is my html:

<input id="seed_one" type="text" name="seed_one"/><br /> <br />

Thanks,

Lance

Warning: This is an old answer to an old question dating back to 2011. You should be advised to use a more recent release of jQuery and check the API reference for guidance.

The problem you're having is that you are using the jQuery Autocomplete plugin but you're calling it the way you would call the jQuery UI autocomplete.

If you'd use the jQuery UI Autocomplete, the code itself works fine as you can see in this fiddle. If you use the the autocomplete plugin, you've to change the call to

$("#seed_one").autocomplete(data);

Suggestions:

Use autocomplete in jQuery UI instead of the autocomplete plugin. The latter is deprecated.
Fix http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js , this couldn't be access at this time

Complete code for jQuery UI

<html>
<head>
    <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>
</head>

<body>
    <input id="seed_one" type="text" name="seed_one"/>
</body>
</html>

Complete code for Autocomplete plugin:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.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(data);
        });
    </script>
</head>

<body>
    <input id="seed_one" type="text" name="seed_one"/>
</body>
</html>

Try changing

$("#seed_one").autocomplete({ source: data });

$("#seed_one").autocomplete(data);

Recently, I have found problems with lots of JQUERY and bootstrap users. while using both of them together we have to use script tags wisely. Otherwise, bootstrap won't allow to make use of JQUERY. Use tags as shown here so that it works correctly.

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-3.6.0.js" ></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

For Mvc architecture you must delete already embedded

@Scripts.Render("~/bundles/Jquery") and
@Scripts.Render("~/bundles/Jqueryval")

from all .cshtml files at the end and for also views/Shared/_layout.cshtml at the end and put our jquery suitable files on his suitables .cshtmls files in head...and let's enjoy. put on head..these files

<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" /> 
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>