人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ajaxを使ってGoogle サジェストhttp://www.google.co.jp/webhp?complete=1&hl=jaみたいなオートコンプリート機能を実現したいわけですが、
そのデータはXMLファイルからでなくMySQLから持ってこようと考えています。
また、MySQLとの接続はPHPでなくJSPです。
いろいろやってみたのですが、プルダウンメニューの実装が難しくて、てこずっています。
何かいい案ないですか?

●質問者: Bain
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:Ajax Google JSP MySQL PHP
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● esecua
●20ポイント

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"で検索してみて)


2 ● ohmix1
●100ポイント ベストアンサー


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

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


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

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

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


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

◎質問者からの返答

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

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

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


3 ● zebevogue
●20ポイント

基本的には入力エリアの値が変更された場合に 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> ◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ