0

我坚持使用 jQuery 自动完成功能（我正在尝试这个示例）

我不明白问题是什么：浏览器控制台中没有显示任何消息。

正在调用 URL 并正确打印服务器端的输出。

JSP 页面中未显示自动完成功能。

JSP 页面

<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
        .ui-autocomplete-loading {
            background: white url('images/loader.gif') right center no-repeat;
        }
    </style>
</head>
<body>
    <div class="box">
       <span class="label">Names</span>
       <span class="ib"> <input type="text" name="name" id="name"/></span>
    </div>
<script>
  $(function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }

        $( "#name" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://localhost:8080/cxn/test",
                    dataType: "jsonp",
                    data: request,
                    success: function( data ) {
                        response( $.map( data.names, function( item ) {
                            console.log(item);
                            return {
                                label: item.names,
                                value: item.names
                            }
                        }));
                    },
                     error: function( data ) {
                           alert(data.names);
                           console.log(data);
                           alert('error');    
                   }

                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });

</script> 
</body>

在行动配置

<action name="test" class="iland.supplier.SupplierAction" method="test">
            <result  type="json"></result>
        </action>

在行动类

 public class SupplierAction extends ActionSupport {
    private ArrayList Names;
    //getter and setter of names
     public String test() {
            ArrayList<String> sss = new ArrayList<String>();
            sss.add("Manish");
            sss.add("Manoj");
            sss.add("Mohan");
            sss.add("Madhuri");
            sss.add("Mayank");
            sss.add("Mitesh");
            sss.add("Mitali");
            setNames(sss);
            for (String s : sss) {
                System.out.println(" " + s);
            }

            return SUCCESS;
        }
}

这是我在自动完成上方尝试的 json 数据。我想自动完成名称 在此处输入图像描述

这里

error: function( data ) {
                               alert(data.names);
                               console.log(data);
                               alert('error');    
                       }

错误被调用 alert(data.names) is undefined 并在控制台中打印如下 在此处输入图像描述

4

4 回答 4

1

您缺少吸气剂。并且以大写字母开头的变量名无论如何都会阻止它被发现。也不需要第二个 ArrayList，并且操作代码中有错字（我假设private Names;是private List<String> Names;）。

它应该是这样的：

private List<String> names;

public List<String> getNames(){
    return names;
}

public String test() {

    names = new ArrayList<String>() {{
        add("Manish");
        add("Manoj");
        add("Mohan");
        add("Madhuri");
        add("Mayank");
        add("Mitesh");
        add("Mitali");
    }};

    for (String s : names) {
        System.out.println(" " + s);
    }

    return SUCCESS;
}
于 2013-10-22T15:04:23.360 回答
0

Try this in your response.

 response( $.map( data.names, function( item ) {
 return {
    label: item,
    value: item
    }
 }));

Since your data.names array is an array of strings, there are no properties. So just use item in your response function.

于 2013-10-22T14:35:58.050 回答
0

我改变了

   dataType: "jsonp",

至

  dataType: "json",
于 2013-10-23T13:17:16.533 回答
0

尝试以下步骤：

  1. 将您的方法 ( test()) 标记为 ajaxMethod，如下所示。您需要包含 Ajax 命名空间：

    using Ajax; 
[Ajax.AjaxMethod]
public String test()
{
    your code...
}

  2. 在 Page_Load 事件的页面中添加以下两行：

    using Ajax;
Ajax.Utility.RegisterTypeForAjax(typeof(SupplierAction.test));
于 2013-10-22T14:41:29.917 回答