implement normalize() into search function in javascript

Question

I'm trying to implement this normalize() function into my search function to make it accent insensitive, but I don't really understand how to do it. This is how I tried, but it messes up the whole search function. I would be really grateful if anyone could show me how to do this.

    function myFunction() {
      var input, filter, cards, cardContainer, title, i, filt, tit;
      input = document.getElementById("myFilter");
      filter = input.value.toUpperCase();
      filt = filter.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
      cardContainer = document.getElementById("myItems");
      cards = cardContainer.getElementsByClassName("col-md-4");

      for (i = 0; i < cards.length; i++) {
        title = cards[i].querySelector(".card-body");
        tit = title.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
        if (tit.innerText.toUpperCase().indexOf(filt) > -1) {
          cards[i].style.display = "";

        } else {
          cards[i].style.display = "none";

        }
      }
    }

The working accent sensitive version:

    function myFunction() {
      var input, filter, cards, cardContainer, title, i;
      input = document.getElementById("myFilter");
      filter = input.value.toUpperCase();
      cardContainer = document.getElementById("myItems");
      cards = cardContainer.getElementsByClassName("col-md-4");

      for (i = 0; i < cards.length; i++) {
        title = cards[i].querySelector(".card-body");
        if (title.innerText.toUpperCase().indexOf(filter) > -1) {
          cards[i].style.display = "";

        } else {
          cards[i].style.display = "none";

        }
      }
    }

and an example for the html I want to search in:

 <div class="col-md-4">
                <div class="card card-profile" style="min-height: 386px;" id="268">
                  <div class="card-avatar">
                    <a href="#">
                      <img class="img" src="assets/img/faces/avatar.png" />
                    </a>
                  </div>
                  <div class="card-body">
                    <div class="card-top">
                      <h4 class="card-category text-gray"><b>ááá</b><br>
                        <span style="color: black;">úú</span><br>
                        <span style="color: black;" ></span>
                        blabla</h4>
                    </div>
                    <hr>
                    <h5 class="card-description">
                      <i class="material-icons md-18">
                        mobile_friendly
                      </i>
                      <b>tel.:</b> <a href="tel:06301212121">06301212121</a>
                    </h5>

                    <div class="card-header" role="tab" id="heading268">
                      <h5 class="mb-0">
                        <div class="col text-center">
                          <a class="btn btn-dark" style="width: 100%;" data-toggle="collapse" data-parent="#accordion" href="#collapse268" aria-expanded="false" aria-controls="collapse268">Részletek<i class="material-icons">
                              keyboard_arrow_down
                            </i></a>
                        </div>
                      </h5>
                    </div>
                    <div id="collapse268" class="collapse" role="tabpanel" aria-labelledby="heading268">

                      <h5 class="card-description"  style='display: none';>
                        <i class="material-icons">
                          mobile_friendly
                        </i>
                        <b>tel2.:</b> <a href="tel:"></a>
                      </h5>
                      <h5 class="card-description">
                        <b> Leírás:</b>
                        leírás teszt                    </div>
                    </h5>
                    </div>
                  </div>
                </div>
              </div>

For example if I want to search for 'gyopár' I should get the result with 'gyopar' and 'gyopár' aswell. — admin, Jun 28 '20 at 14:29
have you had a look to this [answer](https://stackoverflow.com/a/37511463/1447675)? — Nina Scholz, Jun 28 '20 at 14:34
Yes, that's what I'm trying to implement into my code, but it messed up the whole search function. I guess I don't do it correctly. — admin, Jun 28 '20 at 14:38
Yes, I edited the question. The search function works fine without the accent sensitive normalize function. — admin, Jun 28 '20 at 14:48
Not sure if I understand you, but I'd like to use the whole card-body to be searchable. — admin, Jun 28 '20 at 15:29
Still couldn't solve the problem. I'd be really grateful if anyone could help me out. — admin, Jun 29 '20 at 06:27

score 0 · Answer 1 · answered Jun 29 '20 at 12:39

Here's the solution:

function myFunction() {
      var input, filter, cards, cardContainer, title, i;
      input = document.getElementById("myFilter");
      filter = input.value.toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
      cardContainer = document.getElementById("myItems");
      cards = cardContainer.getElementsByClassName("col-md-4");

      for (i = 0; i < cards.length; i++) {
        title = cards[i].querySelector(".card-body");
        if (title.innerText.toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").indexOf(filter) > -1) {
          cards[i].style.display = "";
        } else {
          cards[i].style.display = "none";
        }
      }
}

implement normalize() into search function in javascript

1 Answers1