1

我正在尝试在我的网站上使用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"}
]

无论我输入什么，它都会给出下拉列表中的所有值。

4

1 回答 1

2

对于您的情况，您有两种选择，

选项1：根据请求项填充json（最佳方法）

您的 jsp 响应应该与查询字符串匹配，在这里您盲目地将所有值填充为响应，但它应该基于您的请求字符串。

例如，

如果您的输入字符串是“Pulp”，那么您的 jsp 应该只返回，

 [{"value":"Pulp fiction"}}

没有什么可抱怨 jQuery 的工作基于其性质，您需要调整您的服务器端 json 以根据您的输入查询生成输出。

选项2：向整个填充的对象添加过滤器

考虑这个例子 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>

选择最适合您的那个。

于 2012-12-26T10:10:57.610 回答