jQueryで<select >のオプションを動的にフィルタリングするには？

 
<select >
<option value="something">something</option>
<option value="something_else">something else</option>
</select>
<input type="text" >

ユーザが何かを入力すると、その入力に一致する値を持つオプションだけが表示されるようにします。

Aaron Kurtzhals
編集された質問 20日 12月 2012 в 8:14
プログラミング
javascript jquery dom
19日 9月 2009 в 4:22
7 ビュー

同じ値で複数のオプションがある理由はよくわかりませんが、次のようになります。

Mottie
編集した答え 2日 7月 2017 в 11:25
解説 (1)

他のすべてとは少し異なりますが、これが最も単純だと思います。

$(document).ready(function(){

    var $this, i, filter,
        $input = $('#my_other_id'),
        $options = $('#my_id').find('option');

    $input.keyup(function(){
        filter = $(this).val();
        i = 1;
        $options.each(function(){
            $this = $(this);
            $this.removeAttr('selected');
            if ($this.text().indexOf(filter) != -1) {
                $this.show();
                if(i == 1){
                    $this.attr('selected', 'selected');
                }
                i++;
            } else {
                $this.hide();
            }
        });
    });

});
解説 (1)

これは簡単な解決策で、リストのオプションをクローンしてオブジェクトに保存しておき、後で復元できるようにするものです。スクリプトはリストを一掃し、入力テキストを含むオプションだけを追加します。これはクロスブラウザでも動作するはずです。この投稿を参考にしました：https://stackoverflow.com/a/5748709/542141

HTML

<input id="search_input" placeholder="Type to filter">
<select id="theList" class="List" multiple="multiple">

またはカミソリ

@Html.ListBoxFor(g => g.SelectedItem, Model.items, new { @class = "List", @id = "theList" })

スクリプト

<script type="text/javascript">
  $(document).ready(function () {
    //copy options
    var options = $('#theList option').clone();
    //react on keyup in textbox
    $('#search_input').keyup(function () {
      var val = $(this).val();
      $('#theList').empty();
      //take only the options containing your filter text or all if empty
      options.filter(function (idx, el) {
        return val === '' || $(el).text().indexOf(val) >= 0;
      }).appendTo('#theList');//add it to list
     });
  });
</script>
Community
編集した答え 23日 5月 2017 в 11:33
解説 (0)

他のほとんどのソリューションよりもはるかに単純なコード。 テキストを探し(ケースが鈍感)、CSSを使用して内容を非表示/表示します。 データのコピーを保存するよりもはるかに優れています。

このメソッドに、選択ボックスのIDと、フィルターを含む入力のIDを渡します。

function FilterSelectList(selectListId, filterId)
{
    var filter = $("#" + filterId).val();
    filter = filter.toUpperCase();

    var options = $("#" + selectListId + " option");
    for (var i = 0; i < options.length; i++)
    {
       if (options[i].text.toUpperCase().indexOf(filter) < 0)
           $(options[i]).css("display", "none");
       else
           $(options[i]).css("display", "block");
    }
};
解説 (1)

Lessanの回答を更新して、オプションの属性も維持します。

スタックオーバーフローで答えるのはこれが初めてなので、彼の答えを編集するか、自分で作成するかはわかりません。

jQuery.fn.allAttr = function() {
  var a, aLength, attributes, map;
  if (!this[0]) return null;
  if (arguments.length === 0) {
    map = {};
    attributes = this[0].attributes;
    aLength = attributes.length;
    for (a = 0; a < aLength; a++) {
      map[attributes[a].name.toLowerCase()] = attributes[a].value;
    }
    return map;
  } else {
    for (var propin arguments[0]) {
      $(this[0]).attr(prop, arguments[0][prop]);
    }
    return this[0];
  }
};

jQuery.fn.filterByText = function(textbox) {
  return this.each(function() {
    var select = this;
    var options = [];
    $(select).find('option').each(function() {
      options.push({ value: $(this).val(), 
        text: $(this).text(), 
        allAttr: $(this).allAttr() });
    });
    $(select).data('options', options);

    $(textbox).bind('change keyup', function() {
      var search = $.trim($(this).val());
      var regex = new RegExp(search, "gi");

      $.each($(select).empty().data('options'), function(i, option) {
        if (option.text.match(regex) !== null) {
          $(select).append(
            $('').text(option.text)
            .val(option.value)
            .allAttr(option.allAttr)
          );
        }
      });
    });
  });
};
Shawn
編集した答え 27日 3月 2013 в 7:03
解説 (1)

これと同様の問題があったので、受け入れられた回答を変更して、より一般的なバージョンの関数を作成しました。 ここに置いておきたいと思った。

var filterSelectOptions = function($select, callback) {

    var options = null,
        dataOptions = $select.data('options');

    if (typeof dataOptions === 'undefined') {
        options = [];
        $select.children('option').each(function() {
            var $this = $(this);
            options.push({value: $this.val(), text: $this.text()});
        });
        $select.data('options', options);
    } else {
        options = dataOptions;
    }

    $select.empty();

    $.each(options, function(i) {
        var option = options[i];
        if(callback(option)) {
            $select.append(
                $('').text(option.text).val(option.value)
            );
        }
    });
};
解説 (0)
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script language='javascript'>
jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
  return this.each(function() {
    var select = this;`enter code here`
    var options = [];
    $(select).find('option').each(function() {
      options.push({value: $(this).val(), text: $(this).text()});
    });
    $(select).data('options', options);
    $(textbox).bind('change keyup', function() {
      var options = $(select).empty().scrollTop(0).data('options');
      var search = $.trim($(this).val());
      var regex = new RegExp(search,'gi');

      $.each(options, function(i) {
        var option = options[i];
        if(option.text.match(regex) !== null) {
          $(select).append(
             $('').text(option.text).val(option.value)
          );
        }
      });
      if (selectSingleMatch === true && 
          $(select).children().length === 1) {
        $(select).children().get(0).selected = true;
      }
    });
  });
};

  $(function() {
     $('#selectorHtmlElement').filterByText($('#textboxFiltr2'), true);
  });
</script>
解説 (0)

select2プラグインを使用して、このようなフィルターを作成できます。 これにより、多くのコーディング作業を回避できます。 https://select2.github.io/からプラグインを取得できます。

このプラグインは適用が非常に簡単で、高度な作業でも簡単に実行できます。 :)。

解説 (0)