Lance Lance - 6 months ago 25
Javascript Question

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


And here is my html:

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


Thanks,

Lance

Answer

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:

  1. Use autocomplete in jQuery UI instead of the autocomplete plugin. The latter is deprecated.
  2. 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>
Comments