Question

我坚持使用jQuery自动完成功能（I am trying this example）

我没有得到问题所在：浏览器控制台中没有显示任何消息。

调用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>

in action config

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

in actionClass

 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数据，我正在尝试以上自动完成功能。我希望自动填写姓名 enter image description here

这里

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

错误被调用 alert(data.names) is undefined 并在控制台中打印如下 enter image description here

Answer 1

你错过了Getter。并且以大写字母开头的变量名称无论如何都无法找到它。也不需要第二个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;
}

Answer 2

在response中尝试此操作。

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

由于您的data.names数组是一个字符串数组，因此没有属性。所以只需在响应函数中使用item。

Answer 3

尝试以下步骤：

将您的方法（test()）标记为ajaxMethod，如下所示。您需要包含Ajax名称空间：
```
using Ajax; 
[Ajax.AjaxMethod]
public String test()
{
    your code...
}
```

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

using Ajax;
Ajax.Utility.RegisterTypeForAjax(typeof(SupplierAction.test));

Answer 4

我已经改变了

   dataType: "jsonp",

到

  dataType: "json",

自动完成如何使其运行

4 个答案: