Как отфильтровать несколько идентификаторов в textarea и отображать другие

Question

я хочу найти user_id из всех данных списка.

при поиске user_id я скопирую user_id из excel и вставлю его в textarea.

и затем все user_id, которые я выбрал, должны соответствовать user_id из всех list data.

это мой код

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<textarea name="" id="paste_your_id"></textarea>
<ul class="ul-list">
  <li data-id="1">Mr. A</li>
  <li data-id="2">Mr. B</li>
  <li data-id="3">Mr. C</li>
  <li data-id="4">Mr. D</li>
  <li data-id="5">Mr. E</li>
  <li data-id="6">Mr. F</li>
  <li data-id="7">Mr. G</li>
</ul>

выход

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea name="" id="paste_your_id">1
2
3
7</textarea>
<ul class="ul-list">
  <li data-id="1">Mr. A</li>
  <li data-id="2">Mr. B</li>
  <li data-id="3">Mr. C</li>
  <li data-id="4" style="display:none;">Mr. D</li>
  <li data-id="5" style="display:none;">Mr. E</li>
  <li data-id="6" style="display:none;">Mr. F</li>
  <li data-id="7" >Mr. G</li>
</ul>

Большое вам спасибо

Answer 1

Вы можете достичь этого простым способом

var userList = $(".ul-list").find("li").toArray(); // Store list of userId value here

$("#paste_your_id").on("keyup", function()
{
  var strIds = $(this).val();
  var arrayIds = strIds.split(/[^\d]+/); // Split each item by `whitespace` or `by line` 
  var isFilter = arrayIds.filter(item => item !== "").length > 0;
 
  userList.forEach(item => 
  {
    var id = $(item).data("id").toString();
    var isShow = !isFilter || arrayIds.indexOf(id) !== -1;
    $(item).toggle(isShow);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="" id="paste_your_id"></textarea>
<ul class="ul-list">
  <li data-id="1">Mr. A</li>
  <li data-id="2">Mr. B</li>
  <li data-id="3">Mr. C</li>
  <li data-id="4">Mr. D</li>
  <li data-id="5">Mr. E</li>
  <li data-id="6">Mr. F</li>
  <li data-id="7">Mr. G</li>
</ul>

Обновлено

1. Ваши данные списка могут вернуться к display:block при удалении текста в textarea таким образом

   var isFilter = arrayIds.filter(item => item !== "").length > 0;

2. Используйте .toggle () , чтобы быть более элегантным
3. Некоторые комментарии, которые я упомянутый в JS коде для повышения производительности.

Answer 2

Ваш JS код

var arrEleIds = $("li").map(function(){return $(this).attr("data-id");}).get();
    var arrTextVal = $('#paste_your_id').val().replace(/\n/ig, '').split("");
    var difference = arrEleIds .filter(x => !arrTextVal.includes(x));
    difference.forEach(item => 
    {
        $('li[data-id='+item+']').hide();
    })

Ваш HTML

<textarea name="" id="paste_your_id">1
2
3
7</textarea>
<ul class="ul-list">
  <li data-id="1">Mr. A</li>
  <li data-id="2">Mr. B</li>
  <li data-id="3">Mr. C</li>
  <li data-id="4">Mr. D</li>
  <li data-id="5">Mr. E</li>
  <li data-id="6">Mr. F</li>
  <li data-id="7">Mr. G</li>
</ul>

Answer 3

или это ...

const regex    = /[A-Za-z0-9]+/g   // accept chars and nums 
  ,   Id_Elm   = document.getElementById('paste_your_id')
  ,   li_List  = document.querySelectorAll('ul.ul-list li')
  ;
function Set_List() {
  let IDs = Id_Elm.value.match(regex) || []
  li_List.forEach(li=>{
    li.style.display = (IDs.includes( li.dataset.id )) ? 'list-item' : 'none'
  })
}
Set_List()

Id_Elm.oninput = Set_List

<textarea name="" id="paste_your_id"></textarea>
  <ul class="ul-list">
    <li data-id="1">Mr. A</li>
    <li data-id="2">Mr. B</li>
    <li data-id="3">Mr. C</li>
    <li data-id="4">Mr. D</li>
    <li data-id="5">Mr. E</li>
    <li data-id="6">Mr. F</li>
    <li data-id="7">Mr. G</li>
  </ul>