使用jsp json的jquery自动完成
使用jsp json的jquery自动完成
提问于 2012-12-26 17:39:20
我正尝试在我的网站上使用http://jqueryui.com/autocomplete/#multiple-remote，但是我不能让它给出正确的结果。
我的HTML是：
<input id="movies-text" size="50" />我的Jquery代码是：
$('#movies-text').autocomplete({
minLength:3,
source:function(request,response){
$.getJSON('searchmovies.jsp',{q:request.term},function(result){
response($.map(result,function(item){
return item.value;
}));
});
}
});searchmovies.jsp看起来像这样：
<%@ page contentType="application/json" language="java" import="java.sql.*" errorPage="" %>
<%
response.setContentType("application/json");
response.setHeader("Content-Disposition", "inline");
%>
[
{"value":"Pulp fiction"},
{"value":"The hobbit"},
{"value":"Apocalypse Now"},
{"value":"As good as it gets"},
{"value":"Annie hall"},
{"value":"Butch Cassidy and the sundance kid"},
{"value":"Terminator"}
]无论我输入什么，它都会给出下拉列表中的所有值。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-12-26 18:10:58
对于你的情况你有两个选择
Option1:根据请求项(最佳方法)填充json
您的jsp响应应该与查询字符串匹配，在这里您盲目地将所有值作为响应填充，但它应该基于您的请求字符串。
例如,
[{"value":"Pulp fiction"}}没有什么可以抱怨jQuery，它的工作基于它的性质，你需要调整你的服务器端json来产生基于你的输入查询的输出。
考虑这个示例test.html，
<html>
<head>
<title>jQuery UI Autocomplete - Remote Data functionality with Filter</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
function loadData(){
var movie_elements;
$('#movies-text').autocomplete({
minLength:3,
source:function(request,response){
$.getJSON('searchmovies.jsp',{q:request.term},function(result){
movie_elements = $.map(result,function(item){return item.value;});
response( $.ui.autocomplete.filter(movie_elements, extractLast( request.term ) ) );
});
}
});
}
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
</script>
</head>
<body onload="loadData();">
<input id="movies-text" size="50" />
</body>
</html>选一个最适合你的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14038630
复制相关文章
相似问题
腾讯云开发者
