Question

我有一个搜索输入和一些DIV，我想当我在输入中写入div时，它的文本没有输入值消失。

我尝试过此代码，但无法正常工作

<p>Test</p>
<div class="uk-card">
   <table class="uk-table uk-table-divider">
     <tr *ngFor="let row of array">
       <td *ngFor="let field of row">
         <input type="checkbox" [(ngModel)]="field.checked">{{field.text}}
       </td>
     </tr>
   </table>


<div class="opened-sid">

    <input type="text" class="looking">

    <div class='some'>

        <div class="eac-ques">
            <p class="the-qu">first</p>
        </div>

        <div class="eac-ques">
            <p class="the-qu">secont</p>
        </div>

        <div class="eac-ques">
            <p class="the-qu">third</p>
        </div>

    </div>

</div>

Answer 1

这是从数据中filter进行查询的方法

<body>
  <input type="text" class="search">
  <div class="output"></div>
  <script src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<script>
$(() => {
  $('.search').keyup(function() {
    let lists = ['first', 'fast', 'second', 'send', 'third', 'touch']
    let search = $(this).val();
    query = lists.filter(list => {
      return list.toLowerCase().startsWith(search.toLowerCase())
    })
    
    $('.output').text(query)
  })
})
</script>
<body>

Answer 2

$('.opened-sid .looking').keyup(function (e) {
  let searchString = $('.looking:first').val();
  $('p.the-qu').hide();
  if (searchString !== '')
    $('p.the-qu:contains("'+ searchString +'")').show();
});

有效PEN：CodePen

Answer 3

on('input')事件处理程序始终可以完成工作。

<body>
    <div class="opened-sid">
  
        <input type="text" class="looking">

        <div class='some'>

            <div class="eac-ques">
                <p class="the-qu">first</p>
            </div>

            <div class="eac-ques">
                <p class="the-qu">secont</p>
            </div>

            <div class="eac-ques">
                <p class="the-qu">third</p>
            </div>

        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
       integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
       crossorigin="anonymous"></script>

    <script>
        $(function() {
            var target = $('.looking');
            target.on('input', function() {
                $.each($('.the-qu'), function(i, e) {
                    if(!$(e).html().startsWith(target.val().toLowerCase())) {
                        $(e).parent().hide();
                    } else {
                        $(e).parent().show();
                    }
                });
            });
        });
    </script>
</body>

删除没有文本输入值的P个文本

3 个答案: