Menu
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
988
If the autocomplete feature is enabled but still not working, try disabling the account sync feature in the You and Google tab as mentioned previously. Click on Turn off to the right of your name and email address. Then restart Google Chrome and enable sync again.
To solve the "$(...). autocomplete is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.
The autocomplete (options) method declares that an HTML <input> element must be managed as an input field that will be displayed above a list of suggestions. The options parameter is an object that specifies the behavior of the list of suggestions when the user is typing in the input field.
The terms are stored as a simple JavaScript array at the top. The browser will call the showResults function after every single keypress. Then it passes the current search to an autocompleteMatch function to get the list of matched terms. Finally, the results are added to the div as an unordered list.
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:
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
