自動完成功能，使其運行

我堅持使用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>

在行動中配置

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

在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

來源

2013-10-22 xrcwrn

在response試試這個自動完成。因爲你的data.names數組是字符串數組，所以沒有屬性。所以只需在您的響應功能中使用item即可。

來源

2013-10-22 14:35:58 JoeFletch

你好我想上面的代碼，但不工作 – xrcwrn

我試過'錯誤：函數（數據）{alert（'error'）;}'。正在執行。如何糾正它 – xrcwrn

檢查控制檯以獲取有關錯誤的詳細信息。 – JoeFletch

嘗試以下步驟：

馬克你的方法（test()）作爲ajaxMethod像下面。您需要包括阿賈克斯命名空間：
```
using Ajax; 
[Ajax.AjaxMethod] 
public String test() 
{ 
    your code... 
} 
```

添加下面兩行的頁面在Page_Load事件：

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

來源

2013-10-22 14:41:29

你缺少消氣。而以大寫字母開頭的變量名可以防止它被發現。也不需要第二個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-22 15:04:23

是的，那是這是我的寫作錯誤 – xrcwrn

不客氣。如果有幫助，不要忘記加註/接受 –

我已經改變

dataType: "jsonp",

到

dataType: "json",

來源

2013-10-23 13:17:16 xrcwrn

自動完成功能，使其運行

回答

相關問題