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

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

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

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

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

jQuery

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

Q&A

1回答

2707閲覧

インクリメンタルサーチにAND検索機能を追加したい

hibikikudo

総合スコア238

JavaScript

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

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

jQuery

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

0グッド

0クリップ

投稿2016/11/04 03:30

###前提・実現したいこと
多数のOption要素のあるselectboxを、別の検索窓からインクリメンタルサーチで検索できるjQueryプラグインがあります。
これにAND検索(絞り込み検索)機能を実装しようとしています。
JSFiddle

AND検索機能を実装するには

  • 半角スペースを区切り文字(デリミタ)として定義
  • 上記をoption要素内の半角スペースと区別

が必要と思われますが、これがうまくできません。
アイデアございましたらご教示頂きたい次第です。
なお、DOM要素を置換または変更することは可能な限り避けたい(のでdatalistを使う方法も今回は避けたい)です。
よろしくお願いいたします。

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

javascript

1(function ($, window, document, undefined) { 2 'use strict'; 3 4 var pluginName = "selectboxsearch", 5 defaults = { 6 delay: 100, 7 bind: 'keyup', 8 }; 9 10 function Plugin(element, target, options) { 11 this.element = element; 12 this.$element = $(element); 13 this.target = target; 14 this.options = $.extend({}, defaults, options); 15 this._defaults = defaults; 16 this._name = pluginName; 17 18 this.vars = { 19 optionRows: $(this.target).children().map(function () { 20 return this; 21 }) 22 }; 23 24 this.init(); 25 } 26 27 Plugin.prototype = { 28 init: function () { 29 var self = this, 30 delay = this.options.delay; 31 32 this.$element.on(this.options.bind, function () { 33 var timeout = window.setTimeout(function () { 34 self.go(); 35 }, delay); 36 37 }); 38 }, 39 40 go: function () { 41 var array = this.vars.optionRows, 42 val = this.$element.val(); 43 //一周目のみ 44 for (var n = 0; n < 1; n++) { 45 // いったん削除 46 $(this.target).children().remove(); 47 for (var i = 0, len = array.length; i < len; i++) { 48 if (array[i]) { 49 //option内のスペースを除去 50 var pos = array[i].innerHTML.toLowerCase().replace(/ /g,'').indexOf(val, 0); 51 // キーワードが空、もしくはヒットした場合要素追加 52 if ((val.replace(/ /g,'').length === 0) || pos >= 0) { 53 $(this.target).append(array[i]); 54 } 55 } 56 } 57 } 58 }, 59 60 additem: function (items) { 61 var self = this, 62 array = this.vars.optionRows, 63 len = this.vars.optionRows.length; 64 65 $.each(items, function (index, item) { 66 var add = true; 67 for (var i = 0, len; i < len; i++) { 68 if (item.value == array[i].value) { 69 add = false; 70 } 71 } 72 if (add == true) { 73 array.push(item); 74 } 75 }); 76 77 this.vars.optionRows = array; 78 self.go(); 79 }, 80 81 delitem: function (items) { 82 var self = this, 83 array = []; 84 85 $.each(this.vars.optionRows, function (index, item) { 86 var del = false; 87 for (var i = 0, len = items.length; i < len; i++) { 88 if (item.value == items[i].value) { 89 del = true; 90 } 91 } 92 if (del == false) { 93 array.push(item); 94 } 95 }); 96 97 this.vars.optionRows = array; 98 self.go(); 99 } 100 }; 101 102 $.fn[pluginName] = function (target, options) { 103 return this.each(function () { 104 if (!$.data(this, "plugin_" + pluginName)) { 105 $.data(this, "plugin_" + pluginName, new Plugin($(this), target, options)); 106 } 107 }); 108 }; 109function _fnGetMaxLenString(settings, colIdx) { 110 var s, max = -1, 111 maxIdx = -1; 112 113 for (var i = 0, ien = settings.aoData.length; i < ien; i++) { 114 s = _fnGetCellData(settings, i, colIdx, 'display') + ''; 115 s = s.replace(__re_html_remove, ''); 116 s = s.replace('&nbsp;', ' '); 117 118 if (s.length > max) { 119 max = s.length; 120 maxIdx = i; 121 } 122 } 123 124 return maxIdx; 125 } 126})(jQuery, window, document); 127

html

1<script> 2 setTimeout(function() { 3 $('#tagKeySearch').selectboxsearch('#tagKey'); 4 }, 500); 5</script> 6 7<input type="search" placeholder="検索" id="tagKeySearch"> 8<select name="target_tag" id="tagKey"> 9 <option value="Hiroshima Carp" selected>Hiroshima Carp</option> 10 <option value="Yokohama Baystars">Yokohama Baystars</option> 11 <option value="Tokyo Giants">Tokyo Giants</option> 12 <option value="Tokyo Swallows">Tokyo Swallows</option> 13 <option value="Hanshin Tigers">Hanshin Tigers</option> 14 <option value="Chunichi Dragons">Chunichi Dragons</option> 15 <option value="Hokkaido Fighters">Hokkaido Fighters</option> 16 <option value="Fukuoka Hawks">Fukuoka Hawks</option> 17 <option value="Chiba Marines">Chiba Marines</option> 18 <option value="Tohoku Eagles">Tohoku Eagles</option> 19 <option value="Osaka Buffaloes">Osaka Buffaloes</option> 20</select>

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2016/11/06 03:44

$(this.target).children().remove(); で DOM要素を置換または変更していますが?
guest

回答1

0

AND検索の場合、検索文字列を分割して処理しても問題ないような気がする。(オプション文字列の中に分割された文字列両方が入っていれば良いから)

JavaScript

1$( () => { 2 let $_s = $( '#tagKey > option:not( [value=""] )' ); 3 $_s.each( function() { 4 let t = $( this ); 5 t.attr( 'data-value', t.val().toLowerCase() ); 6 } ); 7 $( '#tagKeySearch' ).on( 'input', function() { 8 let t = $( this ).val().trim().toLowerCase().split( ' ' ), l = t.length, tmp; 9 tmp = ( l === 1 ) ? t[ 0 ] : t.join( '"][data-value*="' ); 10 if ( !tmp ) { 11 $_s.removeClass( 'hide' ); 12 } else { 13 $_s.addClass( 'hide' ).filter( '[data-value*="' + tmp + '"]' ).removeClass( 'hide' ); 14 } 15 } ); 16} ); 17// trim() だけでは無く連続する空白文字を削除したり全角に対応したりするほうが良い 18// IEでは動かない 19```**動くサンプル:**[https://jsfiddle.net/fzm530dh/](https://jsfiddle.net/fzm530dh/)

投稿2016/11/06 09:44

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問