javascript - 多选择列表即时搜索正在工作，但需要保留 标签

Question

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()只是删除了列表中的所有父元素和子元素。我想在执行搜索和显示匹配项时保留组。

Answer 1

在构建规范的“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 标记。

重置列表的整个innerHTML并在列表被清除时替换它:

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

然后重置列表:

$("#list").html(optionHTML);