JS yordamida ro'yxatni filtrlash uchun Multi-ni qo'shish-ni tanlang

HTML-lardagi ro'yxatimni filtrlash uchun ko'p tanlov tugmasini qo'shish kerak. Hozir men ushbu qidiruv tizimini sinab ko'rdim.

Now I have tried the following but I get an error stating "Uncaught TypeError: Cannot read property 'innerHTML' of undefined at myFunction (search.js:12)"

mening HTML:

<div class="container" >
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
  {% for key, values in data4.iteritems() %}
    

{{key}}

 
    
    {% for client in values %}
  • {{ client[25] }} - {{ client[13] }} - {{ client[16] }} - Nights/Days - {{ client[21] }} - Adults - {{ client[0] }} - Children - {{ client[1] }} - Status - {{ client[3] }}
  • {% endfor %}
  {% endfor %}
</div>
<div class="container">

My JS:

function myFunction() {
 //Declare variables
  var input, filter, ul, li, a, i;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

 //Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

What am I doing wrong? I can't seem to figure out why this isn't working.

Any help would be highly appreciated

2
Stackoverflow'ning kompilyatorida ishlaydi
qo'shib qo'ydi muallif Marco Salerno, manba
Stackoverflow'ning kompilyatorida ishlaydi
qo'shib qo'ydi muallif Marco Salerno, manba

6 javoblar

Men ushbu yo'nalishda muammoni ko'rib turibman

a = li[i].getElementsByTagName("a")[0];

GetElementsByTagName nuqtasini belgilash uchun anchor yorlig'i bo'lishi kerak, lekin hech qanday ulanuvchi mavjud emas

1
qo'shib qo'ydi
To'g'ri! Men hozir buni ko'rganim uchun rahmat! Men kodimni tahrir qilyapman, lekin bu hali to'liq emas. Men hozirda yarim ishlaydigan kodimni jo'nataman
qo'shib qo'ydi muallif Arnoux Olivier, manba

Men ushbu yo'nalishda muammoni ko'rib turibman

a = li[i].getElementsByTagName("a")[0];

GetElementsByTagName nuqtasini belgilash uchun anchor yorlig'i bo'lishi kerak, lekin hech qanday ulanuvchi mavjud emas

1
qo'shib qo'ydi
To'g'ri! Men hozir buni ko'rganim uchun rahmat! Men kodimni tahrir qilyapman, lekin bu hali to'liq emas. Men hozirda yarim ishlaydigan kodimni jo'nataman
qo'shib qo'ydi muallif Arnoux Olivier, manba

OK, shuning uchun snehi56 nima to'g'ri ekanini aytdi. Quyidagi ishlarni bajarish bilan hozirda ishlash uchun qidiruv funksiyasini oldim, biroq u hali kerak bo'lmaydigan hamma narsalarni yashirmadi.

Yangi tahrirlangan HTML:

 <div class="container">
                                            <input type="text" id="myInput" onkeyup="myFunction()"
                                                   placeholder="Search for names..">


                                            {% for key, values in data4.iteritems() %}
                                            <div class="booking-reference">
                                                

{{key}}

 
                                                
    {% for client in values %}
  • {{ client[25] }} - {{ client[13] }} - {{ client[16] }} - Nights/Days - {{ client[21] }} - Adults - {{ client[0] }} - Children - {{ client[1] }} - Status - {{ client[3] }}
  • {% endfor %}
                                            </div>
                                            {% endfor %}

                                        </div>
                                        <div class="container">

Edited JS:

function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
var bookings =  $(".booking-reference");
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');

// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("span")[0];
        console.log(a, a.innerHTML.toUpperCase().indexOf(filter));
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}

}

So this does not give an error anymore and it searches as it should. However I think because I am using a loop to iterate through my results in HTML it is not hiding all the unmatched items as it should after the {{keys}

I think I should hide the whole div "which im calling booking-reference" but not sure how to

0
qo'shib qo'ydi

Siz o'zingizning ID-ga yoki ismingizni divga berasiz va uni JS yordamida yashirasiz.

var x = document.getElementById('booking-reference-div');
x.style.display = 'block'; //none
0
qo'shib qo'ydi

Siz o'zingizning ID-ga yoki ismingizni divga berasiz va uni JS yordamida yashirasiz.

var x = document.getElementById('booking-reference-div');
x.style.display = 'block'; //none
0
qo'shib qo'ydi

Siz o'zingizning ID-ga yoki ismingizni divga berasiz va uni JS yordamida yashirasiz.

var x = document.getElementById('booking-reference-div');
x.style.display = 'block'; //none
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb