###前提・実現したいこと
多数の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(' ', ' '); 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>