I need jQuery autocomplete for a project but it doesn't work for me. I don't know where is my mistake. Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];
$('#recherche').autocomplete({
source : liste
});
</script>
<form>
<input type="text" id="recherche" />
</form>
</body>
</html>
You have multiple issues with html syntax here:
Your script must be after the body tag or it can be placed instead of the head tag and use a document ready check to allow it to run after the page loads (see http://learn.jquery.com/using-jquery-core/document-ready/). Code included inside $( document ).ready()
will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
<!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
</head>
<body>
<form>
<input type="text" id="recherche" />
</form>
</body>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];
$('#recherche').autocomplete({
source : liste
});
</script>
</html>
see a working example here https://jsfiddle.net/q7k28bp0/1/