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

ここでは、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 に答える