Question

我正在尝试完成涉及JQuery UI自动完成的codecademy问题。

无论我尝试什么，我似乎无法让它发挥作用。我确定我错过了一些明显的东西，但我现在没有看到它，有人可以提供一些指导吗？

我的代码如下：

<!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);

Answer 1

将search替换为source。 Search是您可以调用以执行自动填充搜索的方法，而source是搜索的数据源。

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>

JQuery UI自动完成功能似乎无法正常工作

1 个答案: