Reputation: 25
I'm trying to complete a codecademy problem involving JQuery UI's autocomplete.
No matter what I try I can't seem to get this to work. I'm sure I'm missing something obvious but I'm just not seeing it right now, can anyone provide some guidance?
My code is as follows:
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="main">
<div class="container">
<h1>Move</h1>
<p>Form healthy habits to take your fitness to the next level.</p>
<form>
<input id="citySearch" type="text" placeholder="FIND YOUR CITY">
</form>
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h2>Move</h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="col">
<h2>Sync</h2>
<p>Access your activity on your phone, tablet, or computer.</p>
</div>
<div class="col">
<h2>Compete</h2>
<p>Set personal challenges and see how you rank against your friends.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="feature">
<div class="container">
<h2>Move. Rest. Recover. Move.</h2>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>Go Premium</h2>
<p>Receive recommendations based on your activity to level up.</p>
<a class="btn" href="#">Learn More</a>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Stop scrolling. Start moving</h2>
<a class="btn" href="#">Start Now</a>
</div>
</div>
</body>
</html>
app.js
var main = function() {
var cities = [
"New York",
"Boston",
"Philadelphia",
"Miami",
"Seattle",
"San Francisco",
"Boulder"
];
$( "#citySearch" ).autocomplete({
search: cities
});
}
$(document).ready(main);
Upvotes: 0
Views: 219
Reputation: 43117
Replace search
with source
. Search is a method you can call to perform the autocomplete search, while source is the data source that is searched.
var main = function() {
var cities = [
"New York",
"Boston",
"Philadelphia",
"Miami",
"Seattle",
"San Francisco",
"Boulder"
];
$("#citySearch").autocomplete({
source: cities
});
}
$(document).ready(main);
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="main">
<div class="container">
<h1>Move</h1>
<p>Form healthy habits to take your fitness to the next level.</p>
<form>
<input id="citySearch" type="text" placeholder="FIND YOUR CITY">
</form>
</div>
</div>
<div class="supporting">
<div class="container">
<div class="col">
<h2>Move</h2>
<p>Become more active by tracking your runs, rides, and walks.</p>
</div>
<div class="col">
<h2>Sync</h2>
<p>Access your activity on your phone, tablet, or computer.</p>
</div>
<div class="col">
<h2>Compete</h2>
<p>Set personal challenges and see how you rank against your friends.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="feature">
<div class="container">
<h2>Move. Rest. Recover. Move.</h2>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>Go Premium</h2>
<p>Receive recommendations based on your activity to level up.</p>
<a class="btn" href="#">Learn More</a>
</div>
</div>
<div class="footer">
<div class="container">
<h2>Stop scrolling. Start moving</h2>
<a class="btn" href="#">Start Now</a>
</div>
</div>
</body>
</html>
Upvotes: 1