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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

4回答

2309閲覧

一周目の処理の結果を変数に代入して、二周目の処理を行いたい

hibikikudo

総合スコア238

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/11/01 02:37

###前提・実現したいこと
多数のOption要素のあるselectboxを検索でソートする機能を実装しようとしています。
二つの検索窓を用いた絞り込み検索機能を実現するべく、一周目の処理の結果を変数に代入して、二周目の処理を行いたいと考えています。

###発生している問題
しかし、下記のコードでは $(this.target).children().remove();で一度いったん削除する指示がされているので、二つ目の検索窓がうまく機能しません。
一周目の処理結果である $(this.target).append(array[i]);を代入して二周目の処理を行いたいのですが、この方法がうまくいきません。
お知恵を拝借できないでしょうか。どうぞよろしくお願いいたします。

現状の動くサンプルはこちらです JSFiddle
###該当のソースコード

javascript

1(function ($, window, document, undefined) { 2function () { 3 var array = this.vars.optionRows, 4 val = this.$element.val(); 5 // いったん削除 6 $(this.target).children().remove(); 7 for (var i = 0, len = array.length; i < len; i++) { 8 if (array[i]) { 9 var pos = array[i].innerHTML.toLowerCase().indexOf(val, 0); 10 // キーワードが空、もしくはヒットした場合要素追加 11 if ((val.replace(' ', '').length === 0) || pos >= 0) { 12 $(this.target).append(array[i]); 13 } 14 } 15 } 16 } 17});

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

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

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

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

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

think49

2016/11/01 04:23 編集

SyntaxErrorになるので動くことを確認してから質問文にコードを転記して下さい。また、HTML/CSSも追記ください。こちらの環境で現象が再現できるだけの情報が必要になります。質問文に書いたコードだけで再現する事を確認して下さい。(2016/11/01 13:23追記) [該当のソースコード] は SyntaxErrorですが、jsfiddle版は正常なようですね。
guest

回答4

0

ベストアンサー

インクリメンタルサーチを select 要素で実装しようとしているとみました。
datalist要素を使う方法はどうでしょうか。

HTML

1<input type="search" placeholder="検索" list="tagKey"> 2<datalist name="target_tag" id="tagKey"> 3 <option value="Hiroshima Carp"> 4 <option value="Yokohama Baystars"> 5 <option value="Tokyo Giants"> 6 <option value="Tokyo Swallows"> 7 <option value="Hanshin Tigers"> 8 <option value="Chunichi Dragons"> 9</datalist>

Re: hibikikudo さん

投稿2016/11/01 04:39

編集2016/11/01 04:42
think49

総合スコア18156

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

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

hibikikudo

2016/11/01 04:46

まさにこれを実装しようとしておりました。 「インクリメンタルサーチ(incremental search)」という言葉を知らず、伝わりにくい説明になってしまいました。非常に勉強になりました。ありがとうございます。
think49

2016/11/01 04:57

datalist要素は未対応ブラウザ向けにPolyfillを適用する必要がありますのでご注意ください。自前でPolyfillを作ることを試みるのも面白いかもしれませんね。 http://caniuse.com/#feat=datalist
guest

0

プラグインを作る事が目的でなければ、既存のプラグインを使ってはどうでしょうか?

https://select2.github.io/examples.html

投稿2016/11/01 04:14

monzy

総合スコア85

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

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

0

下記にて自己解決しました。
for (var n = 0; n < 1; n++) {で一周目の処理だけに .removeを効かせることで、検索窓二つによる絞り込みが可能となりました(.appendで上から順にソートされ並ぶため今回の用途には合致した)。
ご回答いただいた皆様ありがとうございました。

javascript

1function () { 2 var array = this.vars.optionRows, 3 val = this.$element.val(); 4 5 6 for (var n = 0; n < 1; n++) { 7 // いったん削除 8 $(this.target).children().remove(); 9 for (var i = 0, len = array.length; i < len; i++) { 10 if (array[i]) { 11 var pos = array[i].innerHTML.toLowerCase().indexOf(val, 0); 12 // キーワードが空、もしくはヒットした場合要素追加 13 if ((val.replace(' ', '').length === 0) || pos >= 0) { 14 $(this.target).append(array[i]); 15 } 16 } 17 } 18 } 19 }

投稿2016/11/01 04:44

hibikikudo

総合スコア238

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

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

0

サンプルも見ましたがイマイチなにを実装したいかわかりません。
テキストボックスtagKeySearchに何かを入れるとセレクトボックスtagKeyが
なんらかのロジックでソートされるのでしょうか?

1周目、2周目のクダリもわかりづらいので
もうすこし噛み砕いて説明をされると良いかと思います

投稿2016/11/01 04:09

yambejp

総合スコア114585

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問