I am trying to give my search bar autocomplete function.
JavaScript
x
15
15
1
$(function() {
2
var availableTags = [{
3
"game1": "title1"
4
},
5
{
6
"game2": "title2"
7
},
8
{
9
"game3": "title3"
10
},
11
];
12
$("#choices-text-preset-values").autocomplete({
13
source: availableTags
14
});
15
});
JavaScript
1
14
14
1
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
2
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
3
4
5
<form method="GET" action="{% url 'search_results' %}" style="display: inline; background-color: transparent;" method="get">
6
7
<div id="search_bar" class="row" style="margin-top: 0px; text-align: center;">
8
9
<input name="q" class="sb-pos" id="choices-text-preset-values" type="text" placeholder="Aramak istediğiniz oyunu yazın! " style="padding-left: 30px;" />
10
<button type="submit" style="background-color: transparent; border: none;" class="sb-icon-pos">
11
<i class="fa fa-search" style="color: black; font-size: x-large;"></i>
12
</button>
13
</div>
14
</form>
I am getting this error:
JavaScript
1
4
1
TypeError: $( "#choices-text-preset-values" ).autocomplete is not a function. (In '$( "#choices-text-preset-values" ).autocomplete({
2
source: ['deneme','deneme2']
3
})', '$( "#choices-text-preset-values" ).autocomplete' is undefined)
4
Advertisement
Answer
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 tagasync
. So, make sure that:- the jQuery script tag is located before your script and
- it is not marked as
async
.