J'essaie d'implémenter la fonction de saisie automatique dans mon champ de recherche. Tout fonctionne très bien lorsque la source que j'utilise est un simple tableau JavaScript (voir données var = [...]) comme ceci:Problème de saisie semi-automatique jQuery utilisant un fichier JSP comme source
<%@ page language="java"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Basic Search</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery- ui.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.catcomplete.css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
<script>
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
$(function() {
var data = [
{ label: "Eric Cartman", category: "Users" },
{ label: "John Lennon", category: "Users" },
{ label: "Elvis Presley", category: "Users" },
{ label: "Steven Gerrard", category: "Users" },
{ label: "Java", category: "Programming" },
{ label: "C#", category: "Programming" },
{ label: "C++", category: "Programming" },
{ label: "Python", category: "Programming" },
{ label: "Ruby on Rails", category: "Programming" }
];
$("#search").catcomplete({
delay: 0,
minLength: 3,
source: data
});
});
</script>
<p />
<div class="container well">
<div class="row-fluid">
<form action="search" method="get">
<div class="input-append">
<input type="text" name="query" id="search" placeholder="Search.."/>
<button class="btn" type="submit">Search</button>
</div>
</form>
</div>
</div>
</body>
</html>
Cependant, lorsque je tente de mettre en œuvre la même chose avec un fichier JSP comme source comme ceci:
<%@ page language="java"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Basic Search</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.catcomplete.css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
<script>
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var that = this,
currentCategory = "";
$.each(items, function(index, item) {
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
</script>
<script type="text/javascript">
$(function() {
$("#search").catcomplete({
delay: 0,
minLength: 3,
source: 'getsearchjson.jsp'
});
});
</script>
<p />
<div class="container well">
<div class="row-fluid">
<form action="search" method="get">
<div class="input-append">
<input type="text" name="query" id="search" placeholder="Search.."/>
<button class="btn" type="submit">Search</button>
</div>
</form>
</div>
</div>
</body>
</html>
getsearchjson.jsp:
<%
response.setContentType("application/json");
%>
[
{ label: "Eric Cartman", category: "Users" },
{ label: "John Lennon", category: "Users" },
{ label: "Elvis Presley", category: "Users" },
{ label: "Steven Gerrard", category: "Users" },
{ label: "Java", category: "Programming" },
{ label: "C#", category: "Programming" },
{ label: "C++", category: "Programming" },
{ label: "Python", category: "Programming" },
{ label: "Ruby on Rails", category: "Programming" }
];
Il cesse de fonctionner, c'est-à-dire que la fonctionnalité d'achèvement automatique n'est plus présente sur mon champ de recherche.
Pour clarifier: La seule différence entre la première implémentation et la seconde est la source à partir de laquelle les données sont tirées. Dans la première implémentation, il s'agit d'un tableau JavaScript, dans la deuxième implémentation, il s'agit d'un fichier JSP.
Merci pour toute réponse. Pour votre information, ma connaissance du JavaScript est extrêmement limitée car elle ne fait pas partie du programme d'études de mon université. Cependant, je voudrais l'utiliser pour rendre l'application web plus professionnelle.
Vérifiez que l'URL est correcte. Utilisez les outils de développement Firebug ou Chrome pour voir si une demande est envoyée à votre JSP et quelle est la réponse. –
Merci pour la réponse rapide. En utilisant les outils de développement Chrome, je peux voir qu'une demande est envoyée et que la réponse est en fait les données JSON du fichier getsearchjson.jsp. –