How to display all words?

Question

I have a homework

This problem asks you to build a small user interface that searches a list of words using the set of core technologies that drive most modern web applications, namely HTML, CSS, and Javascript. You are given the design of the user interface. Your job is to implement it using HTML, CSS, and Javascript.

I write a code. But I want to display all words in the avaibleTags when there is no input at the starting. How can I make it?



     <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>

please remove the unnecessary html and make it an [MCVE](https://stackoverflow.com/help/minimal-reproducible-example) — naveen, Jun 27 '20 at 22:04
You can trigger search event on focus and should set minLength to 0. There are great answers here https://stackoverflow.com/questions/1268531/jquery-autocomplete-view-all-on-click — TheInformedMan, Jun 27 '20 at 22:18

naveen · Accepted Answer · 2020-06-27T22:35:28.427

Basically you need to set two things. First minLength: 0. Secondly you need to ask jQuery UI to do a autocomplete("search") for available values on focus of the textbox

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

To close autocomplete, use thus $("#tags").autocomplete("close");

Code

$(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" >

And when I click clear button iı delete input field but in bottom widget line stays same. I cannot clear it how can I delete it when click the button. Please help me — eda, Jun 27 '20 at 22:27

How to display all words?

1 Answers1