मेरे पास एक खोज इनपुट और कुछ डीआईवी हैं, मैं चाहता हूं कि जब मैं इनपुट में लिखता हूं तो divs कि इसके टेक्स्ट में इनपुट का मान गायब नहीं होता है।

मैंने इस कोड को आजमाया है लेकिन यह काम नहीं कर रहा है


<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>

$('.opened-sid .looking').keyup(function () {
    setTimeout(function () {

        var el = $(this);

        $('.eac-ques .the-qu').filter(function () {
            return $(this).text().trim() === el.trim();
        }).parents('.eac-ques').removeClass('disp-no').addClass('active').siblings().removeClass('active').addClass('disp-no');
    });

});

3
Ibrahim Yousry 12 सितंबर 2019, 03:23
2
कोड क्या करना चाहिए?
 – 
SeanMC
12 सितंबर 2019, 03:40

3 जवाब

अपने डेटा से 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>
2
Doggo 12 सितंबर 2019, 03:56
$('.opened-sid .looking').keyup(function (e) {
  let searchString = $('.looking:first').val();
  $('p.the-qu').hide();
  if (searchString !== '')
    $('p.the-qu:contains("'+ searchString +'")').show();
});

वर्किंग पेन: CodePen

0
matrixb51 12 सितंबर 2019, 03:54

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>
0
Udo E. 12 सितंबर 2019, 09:54