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

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

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

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

4

1 回答 1

0
于 2012-10-21T16:28:40.367 回答