質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3255閲覧

javascriptで1文字入力するごとに適切な検索結果を表示したい

mashumaro0628

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/12/15 04:42

###前提・実現したいこと
idがcate_serch_inpのテキストボックスに文字入力があったときに
alertでsel[0]を表示させたいです。

最終的には配列selをコメントアウトしてる部分のように
前述のテキストボックスに1文字入力、削除するごとに
for文で回して適切なドロップダウンリストを表示させたいです
###発生している問題・エラーメッセージ

表示が出ない

###該当のソースコード

<html> <body> <script type="text/javascript"> $res=null; $(function(){ $('#add_product_frm').keyup(function(){ var fd=new FormData($(this).get(0)); $.ajax({ "url":"select.php", "data":fd, "type":"post", "processData": false, "contentType": false, }).done(function(response){ res=response; }); e.preventDefault(); }); }); </script> </head> <body> <div id="main"> <input type="radio" name="div_change" id="add_product_inp"><a>商品の追加</a> <div id="add_product_div"> <form id="add_product_frm" action="masta_add.php" method="post"> <input name="cate_serch_inp" id="cate_serch_inp" type="text" placeholder="商品の種類を選択" autocomplete="off" required><br> <script type="text/javascript"> if(res!=null){ sel = res.split(","); alert(sel[0]); } /*document.write("<select>"); for(i=0;i<sel.length;i++){ document.write("<option>"+sel[i]+"</option>"); } document.write("</select>");*/ </script> </body> </html>

###試したこと
alertでresを表示することはできましたのでresまで
"文字列1,文字列2,文字列3......"
という形式でresに入っていることはわかりました。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/12/15 04:54 編集

とりあえず、特別な理由がなければalertは使うのはやめましょう。(たとえばブレークポイントの代わりにつかっているとかは別)console.logでチェックして下さい、それとselect.phpからはどういったresponseが返ってくる想定なのかわかりません。きちんとサンプルを例示してください
mashumaro0628

2017/12/15 05:16

菊,バラ,ひまわり,ユリ, という風にselect.phpから返ってきます。値のチェックにalertダメなんですね勉強になります。
x_x

2017/12/15 06:24

1文字ごとにということで、秒間に相当数のリクエストが投げられると思いますが、大丈夫でしょうか?
mashumaro0628

2017/12/15 06:27

グーグル検索みたいな感じにしたいのですが負荷が大きすぎるでしょうか
guest

回答1

0

ベストアンサー

$(function(){});はページロード完了後に実行されますが、スクリプトタグに直で書いた処理(コメントアウトの辺り)は随時実行されます。

selectタグの作成、変更処理は関数化し、doneの中で呼び出せばうまくいくんじゃないでしょうか。

function createSelectTag(res){ // selectタグを作る処理 } $(function(){ .done(function(response){ createSelectTag(response); res=response; }); });

大分省略しましたが、こんな感じですかね。

投稿2018/01/02 03:20

moredeep

総合スコア1507

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問