0
我試圖在我的搜索字段上實現自動完成。使用JSP文件作爲源的jQuery自動完成問題
<%@ 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>
然而，當我嘗試實現：當我用源是一個簡單的JavaScript陣列（見VAR數據= [...]）這樣，一切工作正常
<%@ 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：
用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" }
];
它停止工作，即自動完成功能不再出現在我的搜索字段中。
澄清：第一個實現和第二個實現之間的唯一區別是數據的來源。在第一個實現中，它是一個JavaScript數組，在第二個實現中它是一個JSP文件。
感謝您的回覆。爲了您的信息，我的JavaScript知識是非常有限的，因爲它不是我大學課程的一部分。但是，我想用它來使Web應用程序看起來更專業。
檢查URL是否正確。使用Firebug或Chrome開發人員工具查看是否將請求發送到JSP，以及響應是什麼。 –
感謝您的快速回復。通過使用Chrome開發人員工具，我可以看到正在發送一個請求，並且該響應實際上是來自getsearchjson.jsp文件的JSON數據。 –