JavaScript -> aculous

script.aqulo.us サンプル

サンプル

Ajax.Autocompleter Ajax.Request

実行イメージ

入力されたLinuxのコマンド候補を表示し、manを表示する。
コマンドリストは、search.php でデータベースから取得する。
入力したコマンドのmanを出力

index.html

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type=text/css>
		div#suggest ul{
			list-style-type: none;
			border: solid 1px #777777;
		}
		div#suggest li{
			background-color: #FFFFFF
		}
		div#suggest li.selected{
			background-color: #AAAAAA
		}
	</style>

	<script type="text/javascript" src="./js/prototype.js"></script>
	<script type="text/javascript" src="./js/aculous/scriptaculous.js"></script>
	<script type="text/javascript">
		window.onload = function(){
		        // Ajax.Autocompleter("InputのID名","出力先DIVのID名","実行モジュール名"
			new Ajax.Autocompleter("search","suggest","./search.php",{
				paramName:"file",    Inputのname="
				minChars:2           2文字入力した時点で実行
			});
		}


		function getData() {
			// id='form1' の最初の要素の値をセットする (prototype.js)
			var element = Form.findFirstElement('form1');
			new Ajax.Request(
				"./man.php", {
					method: "post",
					parameters: "cmd=" + element.value,
					onSuccess: function(request) {
						// 通信成功時の処理
					},
					onComplete: function(request){
						// 通信完了時の処理
						$('out').innerHTML = request.responseText;
					},
					onFailure: function(request){
						// 通信失敗時の処理
						alert('失敗しました');   
					},
					onException: function (request){
						// 想定外時の処理
						alert('読み込み中にエラーが発生しました');   
					}
			});
		}
	</script>
</head>

<body>
	<form method="POST" id="form1" action="javascript:getData();">
		man検索 <input type="text" id="search" size="50" name="file" id="form1" />
		<div id="suggest"></div>
		<input type="submit" value="実行">
	</form>
	<div id='out'></div>
</body>
</html>

別の記述形式

	new Ajax.Request{
		// 省略
	onComplete: showRes		// 関数名を記述
		// 省略
	}
	
	function showRes(request) {
		$('out').innerHTML = request.responseText;
	}

search.php

<?php
	$search_file = $_POST['file'];

	mb_internal_encoding("UTF-8");
	$link = mysql_connect('localhost','user','pass');
	if (!$link){
		die('DB Connect error'.mysql_error());
	}
	mysql_select_db('userdb',$link);
	$sql="select file from command where file like '".$search_file."%' order by file";
	$result = mysql_query($sql);
	print "<ul>\n";
	$sql_cnt = mysql_num_rows($result);
	print "<li>該当件数 $sql_cnt 件</li>";
	while($row=mysql_fetch_array($result,MYSQL_NUM)){
		foreach($row as $k=>$v){
			print "<li>$v</li>\n";
		}
	}
	print "</ul>\n";
	mysql_close($link);
	mysql_free_result($result);
?>

man.php

<?php
	$cmd = $_POST['cmd'];
	exec("export LANG=ja;man $cmd | col -b > /tmp/tmp.man");

	$lines = file("/tmp/tmp.man");
	foreach($lines as $line){
		print $line."<br />";
	}
?>
      Document-Folder          一覧
HP-UX
HULFT
JAVA
JP1
JavaScript
Linux
MAC
PHP
Perl
Python
Ruby
SOA
Solaris
Unix全般
Windows
XML
エクセル
スタイルシート
セキュリティー
データベース
ネットワーク
パソコン
ブラウザ
プログラム構文
仮想化
          RSS-Folder
ニュース
   アットマーク・アイティ(@IT)
   シンクイット(ThinkIT)
   インターネットコム
   インターネットウォッチ
   日経IT-Pro
   日経パソコン
   CNET Japan
   ZD-NetJapan
   MYCOM
   RBB-Today
ベンダー
   日本IBM
   日本HP
   サンマイクロシステムズ
   NEC
   富士通
   日立
ソフトウェア
   マイクロソフト
   トレンドマイクロ
   オラクル
   サイボウズ
   Mozilla
   野村総合研究所
   (その他ソフトウェア企業)
更新履歴 一覧
 07/08 PERF
プログラム構文
 07/07 PERF
プログラム構文
 06/25 オブジェクトプログラミング2
Perl>サンプル
 07/12 クローン作成
仮想化>vCenter
 07/12 vyatta設定
ネットワーク>vyatta
 07/12 vyattaインストール
ネットワーク>vyatta
 07/12 リポジトリサーバ
Linux>サーバ構築
 07/05 VMwareのインストール
仮想化>VMware
 07/05 PXEブート
仮想化>KVM
 07/01 DHCPでのPXEブート
仮想化>KVM
 06/27 qcow2仮想DISK作成
仮想化>KVM
 06/13 NWの設定
仮想化>VMwareEsxi
 06/13 IPアドレスの変更
仮想化>VMwareEsxi
 06/12 自動ssh
Unix全般>シェル>Bash
 06/12 diffプログラミング
Python
Google