I’m trying to do a autocomplete text input in jQuery with user information from database in PHP and MySQL.
I’m getting the following error:
Uncaught TypeError: $.ajax is not a function
at HTMLInputElement.<anonymous> (file.php:332)
at HTMLInputElement.dispatch (jquery-3.3.1.slim.min.js:2)
at HTMLInputElement.v.handle (jquery-3.3.1.slim.min.js:2)
I import jQuery on header.php that is included in all pages:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
This is my file.php which is the file with the script and the input, I’ll leave just a part of the code, of course the input is inside a form
<input type="text" name="autor" id="autor" placeholder="Escreve o nome do autor" />
<div id="autorLista"></div>
<script>
$(document).ready(function() {
$('#autor').keyup(function() {
var query = $(this).val();;
console.log(query);
if (query != '') {
$.ajax({
url: "./components/search.php",
method: "POST",
data: {
query: query
},
success: function(data) {
$('#autorLista').fadeIn();
$('#autorLista').html(data);
}
});
}
});
$(document).on('click', 'li', function() {
$('#autor').val($(this).text());
$('#autorLista').fadeOut();
});
});
</script>
I don’t even know if php code is working correctly but I think it is. I’ll leave it below (search.php):
<?php
if (isset($_POST['query'])) {
$link = new_db_connection();
$stmt = mysqli_stmt_init($link);
$output = '';
$query = "SELECT id_user, nome_user FROM users WHERE nome_user LIKE ?";
if (mysqli_stmt_prepare($stmt, $query)) {
$output = "<ul>";
if (mysqli_stmt_num_rows($stmt) > 0) {
mysqli_stmt_bind_param($stmt, 's', $nome_user);
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $id_user, $nome_user);
if (mysqli_stmt_fetch($stmt)) {
$output .= "<li>" . $nome_user . "</li>";
}
} else {
$output = '<li>O utilizador que procura não existe.</li>';
}
$output .= "</ul>";
echo $output;
} else {
echo 'erro';
}
}
I’ve tried changing versions of jquery, checked the slim version, etc and nothing makes this work… Any idea, please? Any doubts or if I wasn’t clear, just tell me please. Thank you!
2
Answers
I was importing a slim version when importing bootstrap because it was suggested on their webpage. Now I'm using this
Instead of
In your error it is showing you are using jQuery slim, which doesn’t have Ajax.
Please check you are using ONLY normal jQuery, not the slim version.