- eclipse 4.2
- MaxOS10.8.2
ajaxでjsonpをあらかじめ取得しておき、autocompleteにわたすサンプル
jspで取得する値はmemcachedに入っている
- sample.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <%@ page language="java" contentType="text/html; charset=Shift_JIS" pageEncoding="Shift_JIS"%> <%@ page import="java.util.*" %> <%@ page import="java.net.*" %> <%@ page import="net.rubyeye.xmemcached.*" %> <%@ page import="net.rubyeye.xmemcached.utils.*" %> <%@ page import="net.rubyeye.xmemcached.exception.*" %> <%-- memcachedに以下のデータが入っている key,value 1,value1 2,value2 3,value3 .. 出力はJsonp [ {"label":"1","tag":"value1"} , {"label":"2","tag":"value2"} , {"label":"3","tag":"value3"} , {"label":"4","tag":"value4"} , {"label":"5","tag":"value5"} , {"label":"6","tag":"value6"} , {"label":"7","tag":"value7"} , {"label":"8","tag":"value8"} , {"label":"9","tag":"value9"} ] --%> <% String callback=request.getParameter("callback"); String callbackHeader=""; String callbackFooter=""; if(callback!=null){ callbackHeader=callback+"("; callbackFooter=");"; } %> <%=callbackHeader%>[ <% XMemcachedClientBuilder builder= new XMemcachedClientBuilder(AddrUtil.getAddresses("localhost:11211")); MemcachedClient client=builder.build(); client.setPrimitiveAsString(true); boolean isFirst=true; for(int i=1;i<10;i++){ String val=client.get(String.valueOf(i)); if(val==null)continue; if(isFirst){ isFirst=false; }else{ %> , <% } %> {"label":"<%=i %>","tag":"<%=val %>"} <% } %> ]<%=callbackFooter%> <% client.shutdown(); %> |
- sample.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!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; utf-8"> <link rel="stylesheet" href="./jquery-ui.css" /> <script src="./jquery-1.9.0.js"></script> <script src="./jquery-ui.js"></script> <script> $(function() { var values; $( "#tags" ).autocomplete({ create:function(event,ui){ if(!values){ $.ajax({ url:"./sample.jsp", dataType:"jsonp", data:{}, jsonpCallback:'callback', async:false, success:function(json){ values=eval(json); }, error:function(XMLHttpRequest,textStatus,errorThrown){ } }); } }, source: function(request,response){ response(values); }, select:function(event,ui){ // 選択時にtagを引数にページを呼ぶ location.href="http://localhost/test.jsp?code="+ui.item.tag; } }); }); </script> </head> <body> <div class="ui-widget"> <label for="tags">tag: </label> <input name="tags" id="tags" /> </div> </body> </html> |