ajaxを使ってGoogle サジェストhttp://www.google.co.jp/webhp?complete=1&hl=jaみたいなオートコンプリート機能を実現したいわけですが、

そのデータはXMLファイルからでなくMySQLから持ってこようと考えています。
また、MySQLとの接続はPHPでなくJSPです。
いろいろやってみたのですが、プルダウンメニューの実装が難しくて、てこずっています。
何かいい案ないですか?

回答の条件
  • 1人5回まで
  • 登録:2006/06/05 17:31:47
  • 終了:2006/06/06 18:13:24

ベストアンサー

id:ohmix1 No.2

ohmix1回答回数235ベストアンサー獲得回数142006/06/05 23:12:19

ポイント100pt


AjaxTagsのAutocompleteが近いと思われます。

http://codezine.jp/a/article.aspx?aid=171


ただ自分の場合は、いまいち希望(仕様上)の動作をしなかったためJavascriptを一部修正したり、

サーバプログラム(Servlet)のソースを流用したりして、

そのまま利用することはできませんでしたが...


まあ、雛型としては十分使えました。

id:Bain

このようなサイトを探してました!

AjaxTagsは知っていたのですが、英語であることもあって避けていました。

とりあえずコード書いてみます。

2006/06/06 14:20:15

その他の回答(2件)

id:esecua No.1

esecua回答回数510ベストアンサー獲得回数102006/06/05 22:44:33

ポイント20pt

JSPではないですけど大変参考になる記事があります。


http://www.atmarkit.co.jp/fwcr/rensai/ajax_php01/02.html


実装するためのソース配布サイト:http://ajax.zervaas.com.au/

デモ:http://ajax.zervaas.com.au/examples/GoogleSuggestCloneJax/ ("p"で検索してみて)

id:ohmix1 No.2

ohmix1回答回数235ベストアンサー獲得回数142006/06/05 23:12:19ここでベストアンサー

ポイント100pt


AjaxTagsのAutocompleteが近いと思われます。

http://codezine.jp/a/article.aspx?aid=171


ただ自分の場合は、いまいち希望(仕様上)の動作をしなかったためJavascriptを一部修正したり、

サーバプログラム(Servlet)のソースを流用したりして、

そのまま利用することはできませんでしたが...


まあ、雛型としては十分使えました。

id:Bain

このようなサイトを探してました!

AjaxTagsは知っていたのですが、英語であることもあって避けていました。

とりあえずコード書いてみます。

2006/06/06 14:20:15
id:zebevogue No.3

zebevogue回答回数65ベストアンサー獲得回数72006/06/06 01:56:20

ポイント20pt

基本的には入力エリアの値が変更された場合に AJAX で MySQL にクエリを投げ、取得できた場合に DIV タグか何かでプルダウンメニューを作ってあげればいいと思います。

DIV タグに onclick 属性を付けて、クリックされた場合に入力エリアの値を DIV タグ内のテキストで置換させてはどうでしょう。

動作確認せず、かなり省略しますが・・

<input type="text" id="query" name="query" value="" onchange="query(this,event">

<div onclick="replace(this, event)">

function query(input, event)

{

var str =input.value;

//ここでクエリ実行

}

function show_div(array_data)

{

//array_dataに配列として候補が入ってるとして

var objdiv = document.getElementById("list");

var str = '';

for(i=0; i < array_data.length; i++)

{

str += '

' + array_data[i] + '
';

}

objdiv.innerHTML = str;

objdiv.style.display = 'block';

}

function replace(divtag, event)

{

var str = divtag.innerHTML;

var objform = document.getElementById("query");

objform.value = str;

}

</div>
id:Bain

長いコードを書いてくれて本当にうれしいのですが、2番目の回答で解決しましたので申し訳ございません。

divタグにJavaScriptのコードを生成してonclickとかが動作するのか疑問に思います

2006/06/06 18:12:09
  • id:Bain
    ohmix1さん

    ありがとうございました。
    質問内容どおりの機能を実装できました。

    結局はAjaxTagsのデモ版のコードをほとんどコピペしたものとなりましたが。

    以前AjaxTagsでぐぐったのですがそのときはこのサイトはありませんでした。
    見落としていたのかもしれません
  • id:zebevogue
    解決して良かったですね。
    div の onclick は普通に動きますよ。
  • id:ohmix1
    とりあえず、動いているのとのことでよかった。
    <br>
    参考までに、私の希望する動きと異なる点は...
    ・入力文字列と選択候補が同じ場合、選択候補が表示されない(1つの候補を表示したかった)
    ・候補の一番上を選択している場合、↑キーを押すと入力域にフォーカスを移したい
    ・別の入力フィールドに移っても、プルダウンが消えない(諦めた)
    などでした。
    あと、漢字を入力した場合は未確認です。
    <br>
    以上
  • id:Bain
    zebevogueさん

    div の onclickで動くのですか。
    良い事を知りました。
    それで実装した方が早かったのかな


    ohmix1さん

    細かい条件が多いですのぅ
    ・別の入力フィールドに移っても、プルダウンが消えない
    以外は諦めていないということはそれ以外はこれからやるということですかな

    漢字は、MySQL4.0→JavaBeans→Servlet→JSP
    で無理でした。
    XMLを出力するときに文字コードを指定してやればできるかもしれません。

    がんばってください。
    では、どうもありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません