jQuery

http://stackoverflow.com/questions/6511258/jquery-autocomplete-plugin-ie-9-not-working

HTMLヘッダにこれを入れると動きます

jQueryAutoCompleteではデフォルトの送信パラメタはtermのみでちょっと使い勝手が悪かったりします。

そこでカスタマイズしてみます

source:function(request,response)をオーバーライド

test.js

$(function() {
		var url="./searchEngine.jsp";
		var val1=$("#val1").val();
		var val2=$("#val2").val();
		$( "#searchTags" ).autocomplete({
		source : function( request, response ) {
					 request["val1"]=val1;
					 request["val2"]=val2;

			 $.ajax({
				url: url,
				data: request,
				dataType: "jsonp",
				jsonpCallback:'callback',
				success: function( data ) {
					response( data );
				},
				error: function() {
					response( [] );
				}
			});
		},

		});
});

searchEngine.jsp

<%@ page language="java" contentType="text/html; charset=Shift_JIS"
		pageEncoding="Shift_JIS"%>
Map map = request.getParameterMap();
Iterator it = map.keySet().iterator();
while (it.hasNext()) {
	String name = (String)it.next();
	String[] val = (String[])map.get(name);
	for (int i = 0;i

• eclipse 4.2
• MaxOS10.8.2

ajaxでjsonpをあらかじめ取得しておき、autocompleteにわたすサンプル

jspで取得する値はmemcachedに入っている

• sample.jsp

<%@ 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

	    


	tag: 
	

googleなどの検索ボックスで予測したり、ぺろっと出てくるあれ、実装してみました

• 予測で出てくるあれ

http://polarblau.github.com/suggest/

こちらからjquery.suggest.jsをゲット

• ぺろっとでてくるあれ

http://api.jqueryui.com

こちらからjquery-1.9.0.jsとjquery-ui.jsをダウンロード

	     


	tag: