Ajax と PHP で入力補完

2010.03.07 Sunday

仕事でちょっとつまずいたから、メモメモ。

◎入力補完を作成する

テキストボックスに文字が入力されると、ＤＢに登録されているワードと比較して
似たものを候補として出力する、というプログラム。
もちろんリアルタイムで出力されるやつです。

：HTML：

：jQuery：

function funcAjax(str) {
.ajax({
  type: "POST",
  url: "disp.php",
  data: str,
  success: function(res){
   $("#disp").html(res);
  }
});
}

：PHP(disp.php)：
$dispary ←こいつにＤＢから引っ張ってきたデータが入ってるとして
出力形式はセレクトボックスが良い！
ってわけで、最初はこう書いてた。

$disp = "<select name='hoge'>";
forech( $dispary as $key => $value ) {
$disp = $disp."<option value='".$value."' onClick='funcSel'>".$value."</option>";
}
$disp = $disp."</select>";

結果は、ブラウザに予想通りの表示がされるものの
onClick が firefox 以外のブラウザで動作しない！
なんでよ…。

ググっても出てこないし、アレコレ試したけど動かず。

で、最終的にはコレで解決。

$disp = "<select name='hoge' onChange='funcSel'>";
forech( $dispary as $key => $value ) {
$disp = $disp."<option value='".$value."'>".$value."</option>";
}
$disp = $disp."</select>";

onClick はダメだけど onChange なら動きました。
どーゆーこっちゃ。

--------------------------

訂正：onClick について
リファレンス見直しました。
onClick は option に指定できないやん。あれー。
どうもお騒がせしました。。。

プログラム系 / comments(2)

jQueryなら、プラグインにjquery.suggestというのがあるよー。
入力補完、またの名をサジェスト機能というらしい。
英語の意味はそこらへんで調べてね！（ぉ

onClickじゃなくて、$.bindとかでやるとできたかもねー。

とかどうとかいうだけはいってみたのですよ。
そんなボクはサークルのサイトのデザインとかに悩んでるんですよｗｗｗ
たすけてｗｗｗｗ（ぁ

| ことりん | 2010/03/07 2:30 PM |

予想通り来たな。苦笑

jquery.suggest、この仕事来たとき最初に調べたよ。
でもまぁ私が使おうと思ったら、調べること多そうだなぁってのがわかったから。
私がわかる範囲のやり方で何とか作ったわけです。

納期で切羽詰ってると、ゆっくり調べて使えないのが悲しいね。

ことりんがバイトに来てれば、ここは任せれたのにね。
今度会社来たときに修正してくれれば助かるよ。

| 氷乃華 | 2010/03/07 3:01 PM |

コメントする

star field