インクリメンタル検索機能付きListbox

実務で必要になるかもしれないコンポーネントの1つ。Listboxの中身がどんどん絞り込まれていく様子が確認できるのでわかりやすいかも。

クライアント側はこんな感じ。onkeyupイベントで検索処理を実行して、結果をhandleXmlhttp()でセットするという単純なつくり。

<html lang="ja">
<head>
<title>List test</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script type="text/javascript">

</script>
</head>
<body onload="startup();">
<form action="check" method="GET" name="form1">
製品名:<BR>
<input type="text" STYLE="width: 150px;" onkeyup="getNewProductName(this.value)"><BR>
<select name="productname" STYLE="width: 150px;" size=5>
	<option value=""></option>
</select>
<P>
<input type="submit" value="OK">
</form>
</body>
</html>

サーバ側のproductchangedはこんな感じ。まぁ前方一致で何らかの文字列を返してくれればいいわけでw。

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;

public class ProductChanged extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		String[] pname = { "130", "230Cs", "235", "240", "240X", "240Z", "310",
				"310E", "315D", "315ED", "360PE", "365E", "365ED", "365X",
				"370C", "380", "380D", "380E", "380ED", "380X", "380XD",
				"380Z", "385D", "385ED", "385XD", "390", "390E", "390X",
				"530CS", "535", "535E", "535X", "560", "560E", "560X", "560Z",
				"570", "570E", "600", "600E", "600X", "730T", "730TE", "750C",
				"755CD", "755CDV", "755CE", "755CX", "760C", "760CD", "760EL",
				"760L", "760LD", "760XD", "760XL", "765D", "770", "770E",
				"770ED", "770X", "A20m", "A20p", "A21e", "A21m", "A21p",
				"A22e", "A22m", "A22p", "A30", "A30p", "A31", "A31p", "G40",
				"G41", "i Series 1124", "i Series 1157", "i Series 1200",
				"i Series 1400", "i Series 1424", "i Series 1425",
				"i Series 1445", "i Series 1455", "i Series 1456",
				"i Series 1459", "i Series 1464", "i Series 1465",
				"i Series 1476", "i Series 1479", "i Series 1484",
				"i Series 1620", "i Series 1800", "i Series s30", "R30", "R31",
				"R32", "R40", "R40e", "R50", "R50e", "R50p", "R51", "R52",
				"s30", "T20", "T21", "T22", "T23", "T30", "T40", "T40p", "T41",
				"T41p", "T42", "T42p", "T43", "T43p", "TransNote", "X20",
				"X21", "X22", "X23", "X24", "X30", "X31", "X32", "X40", "X41" };

		response.setContentType("text/xml; charset=UTF-8");
		PrintWriter out = response.getWriter();

		String key = request.getParameter("key");
		int keylen = key.length();
		System.out.println("key = " + key);

		// optionを格納するJSONオブジェクト
		JSONArray result = new JSONArray();

		// ""以外が選択されていればoptionデータを追加
		if (key != null && !key.equals("")) {
			for (int i = 0; i < pname.length; i++) {
				if (pname[i].length() >= keylen && key.equals(pname[i].substring(0, keylen))){
					JSONArray array = new JSONArray();
					array.put(pname[i]);
					array.put(pname[i]);
					result.put(array);
				}
			}
		}
		// 生成結果を返す
		out.println(result.toString());
	}
}

さてもう1つ作ってみるか。