Javascript 如何使用jQuery搜索optgroup标签

我在select中有一个包含美国各州的列表，需要使用optgroup标签进行筛选

例如： 如果我搜索阿拉巴马州，我需要返回另一个选择，选择伯明翰和亨茨维尔

我使用这个jQuery代码，当我按选项搜索时，这个代码可以工作，但我需要按组搜索

我如何更改jQuery以仅返回我搜索的州的城市

这是我的工作代码：

提前感谢有人帮我做这件事

$（文档）.ready（函数（）{
jQuery.fn.filterByText=函数（文本框，选择SingleMatch）{
返回此值。每个（函数（）{
var选择=这个；
var期权=[]；
$（“#myfiltercities_id”）.hide（）；
$（选择）.find（'option'）.each（函数（）{
选项。推({
值：$（this）.val（），
text:$（this.text（））
});
});
$（选择）.data（'options'，options）；
$（textbox）.bind（'change keyup'，function（）{
$（“#myfiltercities_id”）.hide（）；
变量选项=$（选择）.empty（）.data（'options'）；
var search=$（this.val（）.trim（）；
var regex=新的RegExp（搜索，“gi”）；
$。每个（选项、功能（i）{
var期权=期权[i]；
if（option.text.match（regex）！==null）{
$（选择）。附加(
$（''）.text（option.text）.val（option.value）
);
}
});
if（selectSingleMatch==true&&$（select.children（）.length==1）{
$（选择）.children（）.get（0）.selected=true；
}
});
});
};
$（函数（）{
$（'myfiltercities_id'）.filterByText（$（'textbox'），true）；
$（“选择选项”）。单击（函数（）{
警报（1）；
});
});
});

伯明翰
亨茨维尔
安克雷奇
朱诺
费尔班克斯
凤凰
图森
小石城
洛杉矶
考虑以下代码


HTML

<form action="/action_page.php">
  <label for="fname">Find City</label>
  <input type="text" id="textbox" name="textbox"><br><br>

  <select name="myfiltercities" id="myfiltercities_id">
    <option value=""></option>
    <optgroup label="Alabama" data-abbr="AL">
      <option value="123">Birmingham</option>
      <option value="123">Huntsville</option>
    </optgroup>
    <optgroup label="Alaska" data-abbr="AK">
      <option value="456">Anchorage</option>
      <option value="789">Juneau</option>
      <option value="135">Fairbanks</option>
    </optgroup>
    <optgroup label="Arizona" data-abbr="AZ">
      <option value="198">Phoenix</option>
      <option value="065">Tucson</option>
    </optgroup>
    <optgroup label="Arkansas" data-abbr="AR">
      <option value="835">Little Rock</option>
    </optgroup>
    <optgroup label="California" data-abbr="CA">
      <option value="402">Los Angeles</option>
    </optgroup>
  </select>
</form>

首先，HTML结构不利于正确的搜索。缩写与结果没有相关性。我将其移动到与城市关联的数据属性

您的搜索功能最初是为选项元素设计的，不适合分组。此外，它还将选项重新添加回“选择”。它似乎过于复杂

我发现在筛选时，只需隐藏所有项目，然后显示与筛选器匹配的项目就更容易了。根据输入中的字符数，我们可能正在搜索缩写或全州名。这是一个容易观察的条件

因此，如果用户搜索
“al”
，他们将得到阿拉巴马州，但如果他们继续搜索
“ala”
，他们将得到阿拉巴马州和阿拉斯加州。
我想你会同意这一点：@DusartVictor我想这不适合我的需要=(
jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
  return this.each(function() {
    var select = this;
    $('#myfiltercities_id').hide().children().hide();
    $(textbox).on("change keyup", function(e) {
      $('#myfiltercities_id').hide().children().hide();
      var search = $(this).val().trim().toLowerCase();
      if (search.length >= 2) {
        $('#myfiltercities_id').show();
        $("optgroup", select).each(function(i, el) {
          var label = $(el).attr("label").toLowerCase();
          var abbr = $(el).data("abbr").toLowerCase();
          if (search.length == 2) {
            if (abbr == search) {
              console.log(search, label, abbr);
              $(el).show();
            }
          } else {
            if (label.indexOf(search) >= 0) {
              console.log(search, label, abbr);
              $(el).show();
            }
          }
        });
      }
    });
  });
}

$(function() {
  $('#myfiltercities_id').filterByText($('#textbox'), true);
  $("select option").click(function() {
    alert(this.value);
  });
});