[ JQuery ] [ 入力補完01 ] [ 入力補完02 ] [ 入力補完03 ] [ 入力補完04 ]

  • 2013-12-23 編集

入力補完04

テスト



ソースコード 

#html{{
<link rel="stylesheet" href="./jquery/css/redmond/jquery-ui-1.10.3.custom.css">
<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
 
<style>
ul.ui-autocomplete li a {
 text-align:left;
 color:red;
}
.ui-autocomplete {
   max-height: 200px;
   overflow-y: auto;
   /* prevent horizontal scrollbar */
   overflow-x: hidden;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
   height: 200px;
}
 
</style>
<script>
$(function(){
 
  $( "#ac1" ).autocomplete({
    source:"./sample_data/autocomplete04.php"
  });
});
</script>
 
<input type="text" id="ac1" size="20">
 
}}


./sample_data/autocomplete04.php のソースです。
これが、autocomplete04.php?term=94008 という書式で実行されます。

<?php
 
$term = $_GET['term'];
 
$term =preg_replace('/[\ \`\"\'\(\[\)\]]/','', $term);
$term = mb_convert_encoding($term, "SJIS", "UTF-8");
 
print "[\n";
 
// 半角で4文字以上の時に検索する
if (strlen($term)>3) {
 
	// データには半角数字が7個連続するのは現在の郵便番号のみなので
	// そのままgrepで検索する事でデータを探せる
	$cmd = "grep {$term} ken_all.csv";
 
	exec($cmd,$r);
 
	// 元のデータはシフトJISなので取りあえずUTF-8に変換
	// データのサンプル
	//   0     1         2        3            4            5        6          7            8
	// 01101,"064  ","0640941","ﾎﾂｶｲﾄﾞｳ","ｻﾂﾎﾟﾛｼﾁﾕｳｵｳｸ","ｱｻﾋｶﾞｵｶ","北海道","札幌市中央区","旭ケ丘",0,0,1,0,0,0
 
	$n = 0;
 
	foreach($r as $d) {
		$n++;
		$d = mb_convert_encoding($d, "UTF-8", "SJIS");
		$d = str_replace("\"", "", $d);
		$d = str_replace(" ", "", $d);
		$f = explode(",", $d);
		if ($n>1) { print ",\n"; }
		print "\"".$f[2]." ".$f[6].$f[7].$f[8]."\"";
		if ($n>1000) { break; }	// 多すぎるて負荷がかからないように制限
	}
}
 
print "]\n";
 
?>

[ 入力補完05 ]