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で読み込んでやると、できます。はい。

便利ですねー。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください！
Twitter / Instagram

『ひとり仕事: フリーランスという働き方』 加藤 康祐

posted with amazlet at 15.09.10

(2012-10-5)
売り上げランキング: 14,705
100円

Amazon.co.jpで詳細を見る

フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）