0

検索フィールドにオートコンプリートを実装しようとしています。私が使用するソースが次のような単純なJavaScript配列（var data = [...]を参照）である場合、すべてが正常に機能します。

<%@ 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>

ただし、JSPファイルをソースとしてまったく同じものを次のように実装しようとすると、次のようになります。

<%@ 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" }
];

動作を停止します。つまり、オートコンプリート機能が検索フィールドに表示されなくなります。

明確にするために：最初の実装と2番目の実装の唯一の違いは、データがプルされるソースです。最初の実装ではJavaScript配列であり、2番目の実装ではJSPファイルです。

ご回答ありがとうございます。ちなみに、私のJavaScriptの知識は、私の大学のカリキュラムの一部ではないため、非常に限られています。ただし、これを使用してWebアプリケーションをよりプロフェッショナルに見せたいと思います。

4

1 に答える 1

0

問題は、JSPに有効なJSONデータが含まれていないことだと思います。有効なJSONにするには、キーを二重引用符で囲む必要があります。

[
    { "label": "Eric Cartman", "category": "Users" },
    { "label": "John Lennon", "category": "Users" }, 
    ...

jsonlint.comを使用して、JSONの有効性を確認してください。

于 2012-10-21T16:28:40.367 に答える