CODEWITHSUNDEEP
jqueryjquery-ui
nooburtino
nooburtino

Reputation: 25

JQuery UI autocomplete doesn't seem to be working

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

Answers (1)

jrummell
jrummell

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

Related Questions