如何显示所有单词？

Question

我有作业

这个问题要求你构建一个小的用户界面，使用核心集搜索单词列表 驱动大多数现代 Web 应用程序的技术，即 HTML、CSS 和 Javascript。给你 用户界面的设计。你的工作是使用 HTML、CSS 和 Javascript 来实现它。

我写了一个代码。但是我想在开始时没有输入时显示avaibleTags 中的所有单词。我怎样才能做到？

     <script>
  $( function() {
    var availableTags = [
      "Alert",
      "America",
      "Assignment",
      "JavaScript",
      "Lisp",
      "Ruby",
      "Scala",
      "Scheme",
      "Türk Hava Kurumu Üniversitesi"
    ];
     $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
  }).focus(function() {
    $(this).autocomplete("search");
  });
});

  function deleteFunction() {
    alert("Clear!");
    document.getElementById("tags").value='';

}
  </script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <div class="sidenav">
      <br>
      <img src="https://mezun.thk.edu.tr/wp-content/uploads/sites/34/2019/01/THKU_Mezun_Logo-min.png" width="200" height="200">
      <a href="#">E..</a>
      <a href="#">15...</a>
      <a href="#">Word Finder</a>
      <a href="#">CENG 472 </a>
      <a href="#">HUMAN COMPUTER INTERACTION</a>
      <a href="#">Assignment-1</a>
    </div>
    <div class="main">
      <div class="ui-widget">
        <h1 style="color: purple; "> Word Finder by E... </h1>
        <br>
        <p class=" lead text-primary">Welcome. As you start writing, suggestions will start to appear. </p>
        <label for="tags">Start typing </label>
        <div class="input-group">
          <span class="input-group-btn">
            <input id="tags" class="form-control" style=" position: center; " placeholder="Type here...."> 
            <input type="button" class="btn btn-danger" onclick="deleteFunction()" value="Clear" >  
        </span>
        </div>
      </div>
    </div>
    </body>

Answer 1

基本上你需要设置两件事。首先minLength: 0。其次，您需要要求 jQuery UI 为文本框的focus 上的可用值执行autocomplete("search")

.focus(function() {
    $(this).autocomplete("search");
});

要关闭自动完成功能，请使用 $("#tags").autocomplete("close");

代码

$(function() {
  var availableTags = [
    "Alert",
    "America",
    "Assignment",
    "Apple",
    "AhmetCoşar",
    "Ankara",
    "Scala",
    "Scheme",
  ];
  $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
  }).focus(function() {
    $(this).autocomplete("search");
  });
  $("#deleteTag").click(function() {
    document.getElementById("tags").value = "";
    $("#tags").autocomplete("close");
  });
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="tags" class="form-control" placeholder="Type here....">
<input id="deleteTag" type="button" class="btn btn-danger" value="Clear" >