2011/4/24

WordPressのContact Form 7とsuggest.jsで入力補完機能付き問い合わせフォームを作る

ちーと、空港名の入力補完機能付き問い合わせフォームを作らないといけなかったんですが。WordPressで問い合わせフォームを作ると言えばContact Form 7ですね。

WordPress › Contact Form 7 « WordPress Plugins

んで、入力補完用のsuggest.jsというのを見つけてきました。

suggest.js – 入力補完ライブラリ

で、問題は空港名の一覧どうやって用意するのというわけですが、これはスクリプト書いて拾ってきましたよ。

<del datetime="2011-04-26T11:41:00+00:00">
include('simple_html_dom.php');
$html = file_get_contents('http://www.photius.com/wfb2001/airport_codes_alpha.html');
$data = str_get_html($html);
foreach($data->find('li') as $element){
	$title = $element->plaintext;
	if (strrpos($title, ',')) {
		$str = stripos($title, ',');
		$title = substr($title,0, $str);
		echo $title.',';
	}
}

なんか引っ張るページのデータ古かったので、API使いましたよっと。

$html = file_get_contents("http://airportcode.riobard.com/search?q=&fmt=JSON");
$json = json_decode($html);
$data= "";
foreach($json as $element){
	$code = $element->{"code"};
	$name = $element->{"name"};
	$name = str_replace(""","",$name);
	$data .= """.$code." ".$name."",n";
}
$data = str_replace("n(","(",$data);
$data = str_replace(",];","];",$data);
$data = "var list=[".$data."];";
$data = str_replace(",n];","n];",$data);
$data = str_replace(", "," ",$data);
echo $data;

これで拾ったデータを頭使うの面倒臭いので、秀丸マクロでvar list = [“aaa”,”bbb”];みたいな形式に整形して、list.jsとして保存して上のsuggest.jsで読み込んでやると、できます。はい。

便利ですねー。

ひとり仕事: フリーランスという働き方
(2012-10-5)
売り上げランキング: 14,705
100円
WordPressデザインレシピ集
狩野 祐東
技術評論社
売り上げランキング: 197,569
WordPress 高速化&スマート運用必携ガイド
こもりまさあき 岡本渉
エムディエヌコーポレーション
売り上げランキング: 435,263