Javascript 将过滤器应用于对象列表并隐藏相应的部分分隔符(部分分隔符和列表元素是分开的)

Question

我使用javascript创建了一个可以过滤的表格。
该表分为按字母顺序排列的部分，由分隔线直观地表示。
一旦我过滤表格，分隔线就不会消失，因为它的类名与列表元素本身不同。
一旦过滤器输入发生变化，我不希望重新加载整个表，因为我认为 javascript 也应该完成这项工作。

这里描述的情况

<div class="address_book_wrapper">
  <div class="address_top_wrapper"></div>
  <div class="address_center_wrapper">

  </div>
  <div class="contact_list_wrapper">
          <!-- search input fiels -->
      <input id="address_search_input" type="text" placeholder="Who are you looking for <?= $first_name ?>?"/>
      <div id="contact_list"></div>
    </div>
</div>
<div class="address_bottom_wrapper"></div>

</div>

//global variables
var initial_char = null;
var address_table_container = document.getElementById('contact_list');

function process_address_data(address_data) {

  function createAddressRow(rowAddressData) {
    var name = rowAddressData[1];
    var first_char = name.charAt(0);

    if (first_char != initial_char) {
      //create new section divider
      var table_section_wrap = document.createElement("div");
      // add a class name
      table_section_wrap.className = 'rowSectionAddress';
      // letter holder
      var first_letter = document.createElement("span");
      first_letter.innerHTML = first_char;
      first_letter.className = 'address_name_table';
      //create new user row
      var table_data_wrap = document.createElement("div");
      table_data_wrap.className = 'rowDataAddress';
      //first name as well
      var address_name = document.createElement("span");
      address_name.innerHTML = rowAddressData[1] + " " + rowAddressData[2];
      address_name.className = 'address_name_table';  
      //append section divider
      table_section_wrap.appendChild(first_letter);
      table_data_wrap.appendChild(address_name);
      address_table_container.appendChild(table_section_wrap);
      address_table_container.appendChild(table_data_wrap);

      //update initial_char and set to current char
      initial_char = first_char;
    } else {
      //create new user row
      var table_data_wrap = document.createElement("div");
      table_data_wrap.className = 'rowDataAddress';
      // name holder
      var address_name = document.createElement("span");
      address_name.innerHTML = rowAddressData[1] + " " + rowAddressData[2];
      address_name.className = 'address_name_table';
      //append name
      table_data_wrap.appendChild(address_name);
      address_table_container.appendChild(table_data_wrap);
    }
  }

    // loop through the data and call createRow function
  for (var i = 0, len = address_data.length; i < len; i++) {
    // get each data
    var userAddressData = address_data[i];
    // create the row (see above function)
    createAddressRow(userAddressData);
  }
}


//filter list
//todo: if filter then delete section letters
function filterContactList() {
  var input, filter, li, i, txtValue;
  input = document.getElementById("address_search_input");
  filter = input.value.toUpperCase();
  li = document.getElementsByClassName("rowDataAddress");
  for (i = 0; i < li.length; i++) {
    var li_val = li[i];
    txtValue = li_val.textContent || li_val.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

当前结果如下所示，我想去掉分隔线。由于过滤器，其他条目被隐藏

我希望这能正确显示我的问题。

Answer 1

你的编码方式真的很费力..

为了简化代码，我使用数据集将第一个字母直接保留在要显示或隐藏的元素上。我还添加了一个 noDisplaySub 类。用于搜索/显示作业

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset

const DomParser = new DOMParser()
  ,   ctx_List  = document.getElementById('contact_list')
  ,   inSearch  = document.getElementById('address_search_input')
  ;
function createSection(firstChar)
  {
  let section= 
   `<div class="rowSectionAddress" data-char1="${firstChar}">
       <span class="address_name_table">${firstChar}</span>
    </div>`;
  return DomParser.parseFromString( section, 'text/html').body.firstChild ;
  }
function createRows(arrData)
  {
  let row =
   `<div class="rowDataAddress">
        <span class="address_name_table">${arrData[1]} ${arrData[2]}</span>
    </div>`;
  return DomParser.parseFromString( row, 'text/html').body.firstChild ;
  }
function process_address_data(address_data)
  {
  let initial_char = null
    , ref_section  = null
    ;
  for (let address of address_data)
    {
    let first_char = address[1].charAt(0).toUpperCase()

    if (initial_char != first_char)
      {
      initial_char = first_char
      ref_section  = createSection(first_char)
      ctx_List.appendChild(ref_section)
      }
    
    ref_section.appendChild( createRows(address) )
    }
  }
var inSearch_key = '*'   // current address_search_input value
  ;
inSearch.oninput=e=>
  {
  let SearchLetter = inSearch.value.toUpperCase();

  SearchLetter = (SearchLetter.length > 0) ? SearchLetter.charAt(0) : '*'

  if (inSearch_key!== SearchLetter )
    {
    inSearch_key = SearchLetter
    ctx_List.querySelectorAll('.rowSectionAddress').forEach(section=>
      {
      if (inSearch_key===section.dataset.char1
      || inSearch_key==='*' )
        { section.classList.remove('noDisplaySub') }
      else
        { section.classList.add('noDisplaySub')    }
  }) } }


// --------------- test part --------------------------
const address_data
        = [ [ '', 'abc 1', 'abc 2' ] 
          , [ '', 'bcd x', 'bcd y' ] 
          , [ '', 'bcd w', 'bcd z' ] 
          , [ '', 'ecd m', 'ecd n' ] 
          , [ '', 'ecd v', 'ecd n' ] 
          , [ '', 'ecd w', 'ecd n' ] 
          ]

process_address_data(address_data)

.noDisplaySub > div { display: none; }

<div class="address_book_wrapper">
  <div class="address_top_wrapper"></div>
  <div class="address_center_wrapper">
   
  </div>
  <div class="contact_list_wrapper">
            <!-- search input fiels -->
    <input id="address_search_input" type="text" placeholder="type '*' for All (or a,b,e) "/>
    <div id="contact_list"></div>
  </div>
<div class="address_bottom_wrapper"></div>
    
</div>