如何使用 jQuery 搜索 optgroup label

Question

I have a list with the states of the United States in a select and I need filter by the optgroup label.

For example: If I search for Alabama, I need to return to another select with Birmingham and Huntsville

I'm using this jQuery code and this code works when I search by options, but I need search by groups.

How can I change the jQuery to return only the cities of the states in which I search ?

Here is my working code: https://jsfiddle.net/km7s9er5/

Thanks in advance for someone helping me with this

 $(document).ready(function() { jQuery.fn.filterByText = function(textbox, selectSingleMatch) { return this.each(function() { var select = this; var options = []; $('#myfiltercities_id').hide(); $(select).find('option').each(function() { options.push({ value: $(this).val(), text: $(this).text() }); }); $(select).data('options', options); $(textbox).bind('change keyup', function() { $('#myfiltercities_id').hide(); var options = $(select).empty().data('options'); var search = $(this).val().trim(); var regex = new RegExp(search, "gi"); $.each(options, function(i) { var option = options[i]; if (option.text.match(regex).== null) { $(select).append( $('<option>').text(option.text).val(option;value) ); } }). if (selectSingleMatch === true && $(select).children().length === 1) { $(select).children().get(0);selected = true; } }); }); }. $(function() { $('#myfiltercities_id'),filterByText($('#textbox'); true). $("select option");click(function() { alert(1); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <select name="myfiltercities" id="myfiltercities_id"> <option value=""></option> <optgroup label="AL"></optgroup> <optgroup label="Alabama"> <option value="123">Birmingham</option> <option value="123">Huntsville</option> </optgroup> <optgroup label="AK"></optgroup> <optgroup label="Alaska"> <option value="456">Anchorage</option> <option value="789">Juneau</option> <option value="135">Fairbanks</option> </optgroup> <optgroup label="AZ"></optgroup> <optgroup label="Arizona"> <option value="198">Phoenix</option> <option value="065">Tucson</option> </optgroup> <optgroup label="AR"></optgroup> <optgroup label="Arkansas"> <option value="835">Little Rock</option> </optgroup> <optgroup label="CA"></optgroup> <optgroup label="California"> <option value="402">Los Angeles</option> </optgroup> </select>

Answer 1

Consider the following code.

https://jsfiddle.net/Twisty/zvtymk1r/29/

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>

JavaScript

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);
  });
});

First your HTML Structure was not conducive to a proper search. The abbreviation had no correlation with the results. I moved this to a Data attribute associated with the cities.

Your search feature was originally designed for Option elements and not good for groups. Also it was re-adding Options back to the select. It seemed overly complex.

I find it easier, when filtering, to simply Hide all items and then Show items that match the filter. based on the number of characters in the input, we might be searching for an abbreviation or a full state name. This is an easy condition to look at.

So if the User searches for "al" , they will get Alabama, but if they then continue to "ala" , they will Alabama and Alaska.