多选列表即时搜索正常工作，但需要保留<optgroup>标签

Multiple select list instant search is working but need to keep <optgroup> tags

本文关键字：保留 标签 optgroup 列表 搜索 工作 常工作      更新时间：2023-09-26

HTML：

<select multiple="multiple" id="list" size="10">
  <optgroup label="Group A">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
  <optgroup label="Group B">
    <option>Orange</option>
    <option>Kiwi</option>
  </optgroup>
</select><br>
<input type="text" id="findItem">

JavaScript：

jQuery(function() {
  var opts = jQuery('#list option').map(function() {
    return [[jQuery(this).text()]];
  });
  jQuery('#findItem').keyup(function() {
    var rxp = new RegExp(jQuery('#findItem').val(), 'i');
    var optlist = jQuery('#list').empty();
    opts.each(function() {
      if(rxp.test(this[0])) {
        optlist.append(jQuery('<option/>').text(this[0]));
      }
    });
  });
});

JSFIDDLE： http://jsfiddle.net/vou3oa58/

即时搜索工作正常，但标题消失了，因为 empty(( 只是删除了列表中的所有父元素和子元素。我想在执行搜索和显示匹配项时保留组。

在构建规范的"opts"列表时，您需要使用更结构化的数据对象来考虑 optgroup 嵌套。例如，对于您的 HTML 代码段，选项可能如下所示：

[{'label': 'Group A', opts: ['Apple',...]}, {'label': 'Group B', opts: [...]}, ..]

构建此函数的循环可能如下所示：

var optList = [];
jQuery('#list optgroup').each(function() {
    var $group = $(this),
        optgroup = {'label': $group.attr('label'), opts: []};
    $group.find('option').each(function() {
        optgroup.opts.push(this.innerText);
    });
    optList.push(optgroup);
});

然后，您只需遍历新数据，将内部"opts"数组值与输入值进行比较......当然，为您找到的任何匹配项构建新的 Optgroup/Option 标记。

要重置列表的整个内部 HTML，并在清除列表时替换它：

var optionHTML = $("#list")[0].innerHTML;

然后重置列表：

$("#list").html(optionHTML);
相关文章：