Question

我正在尝试在我的搜索字段上实现自动完成功能。当我使用的源代码是一个简单的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" }
];

它停止工作，也就是说，我的搜索字段上不再出现自动完成功能。

澄清：第一个实现和第二个实现之间的唯一区别是从中提取数据的源。在第一个实现中，它是一个JavaScript数组，在第二个实现中，它是一个JSP文件。

感谢您的回复。对于您的信息，我的JavaScript知识非常有限，因为它不是我大学课程的一部分。但是，我想用它来使Web应用程序看起来更专业。

Answer 1

我认为问题在于您的JSP不包含有效的JSON数据。键应该用双引号括起来使它成为有效的JSON：

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

使用jsonlint.com检查JSON的有效性。

使用JSP文件作为源的jQuery自动完成问题

1 个答案: