CODEWITHSUNDEEP
javascriptjquery
cvsrt
cvsrt

Reputation: 387

JQuery .autocomplete not found?

I am trying to give my search bar autocomplete function.

$(function() {
  var availableTags = [{
      "game1": "title1"
    },
    {
      "game2": "title2"
    },
    {
      "game3": "title3"
    },
  ];
  $("#choices-text-preset-values").autocomplete({
    source: availableTags
  });
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<form method="GET" action="{% url 'search_results' %}" style="display: inline; background-color: transparent;" method="get">

  <div id="search_bar" class="row" style="margin-top: 0px; text-align: center;">

    <input name="q" class="sb-pos" id="choices-text-preset-values" type="text" placeholder="Aramak istediğiniz oyunu yazın!   " style="padding-left: 30px;" />
    <button type="submit" style="background-color: transparent; border: none;" class="sb-icon-pos">
                            <i class="fa fa-search" style="color: black; font-size: x-large;"></i>
                        </button>
  </div>
</form>

I am getting this error:

TypeError: $( "#choices-text-preset-values" ).autocomplete is not a function. (In '$( "#choices-text-preset-values" ).autocomplete({
      source: ['deneme','deneme2']
    })', '$( "#choices-text-preset-values" ).autocomplete' is undefined)

Upvotes: 2

Views: 334

Answers (1)

JohannesB
JohannesB

Reputation: 2015

The jQuery (or any javascript API in general) API might not be found for a various number of reasons.

Usually the problem is caused by the jQuery javascript code not being loaded at the moment your script executes. This can be due to a various number of reasons:

  • An adblocker might have blocked the jQuery javascript file
  • The jQuery javascript file is hosted on a CDN / other server that is offline
  • You loaded jQuery, but forgot to include jQuery UI (autocomplete is part of jQuery UI!)
  • Your code was executed before jQuery was loaded.
    This can be caused because your <script>$(document).ready(/*whatever*/);</script> code is located before the <script src="/path/to/jquery.js"></script> block, or alternately because you mistakenly made the jquery script tag async. So, make sure that:
    1. the jQuery script tag is located before your script and
    2. it is not marked as async.

Upvotes: 2

Related Questions