CODEWITHSUNDEEP
javascripthtmljquery
eda
eda

Reputation: 31

How to display all words?

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>

Upvotes: 0

Views: 89

Answers (1)

codeandcloud
codeandcloud

Reputation: 55210

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

Upvotes: 2

Related Questions