title: Uncaught ReferenceError: showResults is not defined at HTMLInputElement.onkeyup
body: <p>When I keypress in the input console is continuously showing the error:</p>
  <blockquote>
  <p>Uncaught ReferenceError: showResults is not defined at HTMLInputElement.onkeyup</p>
  </blockquote>
  <p>As you can see in the code, the function is defined. When I remove the AJAX code it starts working. I am unable to find out what the problem is.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let search = $("#livesearch")
  
  function showResults(str) {
    if (str.length === 0) {
      search.addClass("hide");
    } else {
      search.removeClass("hide");
    }
  
    $.ajax({
      url: "/search";
      contentType: "application/json",
      method: "POST",
      data: JSON.stringify({
        query: str
      }),
      success: function(result) {
        search.html(result.response);
      }
    })
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#addbtn {
    font-weight: bold;
    background-color: rgb(237, 245, 229);
  }
  
  #livesearch {
    background-color: #dddd;
    position: absolute;
  }
  
  .hide {
    display: none;
  }
  
  a:link,
  a:hover,
  a:visited,
  a:active {
    color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-xl-7 col-sm-7 col-md-7 "&gt;
    &lt;label class="form-label"&gt;Add Users&lt;/label&gt;
    &lt;input id="userinput" type="text" name="users[]" class="form-control" placeholder="Name" onkeyup="showResults(this.value)"&gt;
    &lt;div id="livesearch" class="p-3 col-12 hide"&gt;This&lt;/div&gt;
    &lt;button id="addbtn" class="form-control mt-3" type="button" onClick="addInput();"&gt;Add&lt;/button&gt;
    &lt;div id="error" class="text-danger p-2"&gt;&lt;/div&gt;
    &lt;div id="formulario" class="d-flex flex-row flex-wrap mt-2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>