Asked Jul 2nd, 2022 8:45 a.m. 208 0 2
  • 208 0 2
+1

làm thế nào để search được key word mà không cần dùng dấu tiếng viêt?

Share
  • 208 0 2

Chào các bạn! Mình làm một chức năng search như bên dưới nếu nhập đúng chính tả thì no hoạt động tốt nhưng nếu mình nhập sai chính tả ví dụ mình nhập: "ca chep" thì nó không ra được kết quả mình muốn là: "cá chép".

Bạn nào giúp mình sửa lại code này với hoặc có nguồn nào tham khảo cho mình xin nhé.🙂

Xin lỗi mình chưa biết căn chỉnh code ở trên này nên code hơi khó đọc.

<!DOCTYPE html>
<br>
  <html>
 <br>
<head>
<br>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<br>
    <style>
<br>
        body { font-family: Arial, Helvetica, sans-serif; }
<br>
        * { box-sizing: border-box; }
<br>
        .row {
<br>
        display: flex; }
<br>
        .left {
<br>
        flex: 35%;
<br>
        padding: 15px 0;
} 
        <br>
        .left h2 {
<br>
        padding-left: 8px;
} 
        <br>
        .right {
<br>
        flex: 65%;
<br>
        padding: 15px;
}
<br>
        #mySearch {
<br>
        width: 100%;
<br>
        font-size: 18px;
<br>
        padding: 11px;
<br>
        border: 1px solid #ddd;
}
<br>
        #myMenu {
<br>
        list-style-type: none;
<br>
        padding: 0;
<br>
        margin: 0;
}
<br>
        #myMenu li a {
<br>
        padding: 12px;
<br>
        text-decoration: none;
<br>
        color: black;
<br>
        display: block
}
<br>
        #myMenu li a:hover {
<br>
        background-color: #eee;
}
<br>
    </style>
<br>
    </head>
<br>
    <body>
<br>
<div class="left" style="background-color:#bbb;">
<br>
    <h2>Menu</h2>
<br>
    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    <br>
<ul id="myMenu">
   
    <li><a href="#">THỊT BÒ</a></li>
   
    <li><a href="#">CÁ CHÉP</a></li>
  
    <li><a href="#">HEO QUAY</a></li>
     
    <li><a href="#">BÁNH MÌ</a></li>

   
</ul>
 <br>
</div>
 <br>
        <script>
 <br>
            function myFunction() {
 <br>
            var input, filter, ul, li, a, i;
 <br>
            input = document.getElementById("mySearch");
 <br>
            filter = input.value.toUpperCase();
 <br>
            ul = document.getElementById("myMenu");
 <br>
            li = ul.getElementsByTagName("li");
 <br>
            for (i = 0; i < li.length; i++) {
 <br>
            a = li[i].getElementsByTagName("a")[0];
 <br>
            if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
 <br>
            li[i].style.display = "";
 <br>
            } else {
 <br>
         
            li[i].style.display = "none";
 <br>
            }
 <br>
            }
 <br>
            }
 <br>
        </script>
 <br>
    </body>
 <br>
</html>
Avatar Khang @khangnd
Jul 2nd, 2022 3:20 p.m.

Bạn tham khảo trang hướng dẫn này để biết cách làm nổi code nhé: https://viblo.asia/helps/cach-su-dung-markdown-bxjvZYnwkJZ#_nhan-manh-highlight-6

👇

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    .row {
      display: flex;
    }

    .left {
      flex: 35%;
      padding: 15px 0;
    }

    .left h2 {
      padding-left: 8px;
    }

    .right {
      flex: 65%;
      padding: 15px;
    }

    #mySearch {
      width: 100%;
      font-size: 18px;
      padding: 11px;
      border: 1px solid #ddd;
    }

    #myMenu {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    #myMenu li a {
      padding: 12px;
      text-decoration: none;
      color: black;
      display: block
    }

    #myMenu li a:hover {
      background-color: #eee;
    }
  </style>
</head>

<body>
  <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
  <ul id="myMenu">
    <li><a href="#">THỊT BÒ</a></li>

    <li><a href="#">CÁ CHÉP</a></li>

    <li><a href="#">HEO QUAY</a></li>

    <li><a href="#">BÁNH MÌ</a></li>

  </ul>

  <script>
    function myFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("mySearch");
      filter = input.value.toUpperCase();
      ul = document.getElementById("myMenu");
      li = ul.getElementsByTagName("li");
      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";


        }
      }
    }
  </script>
</body>

</html>
+1
| Reply
Share

2 ANSWERS


Answered Jul 5th, 2022 1:50 a.m.
Accepted
+2

Bạn tham khảo đoạn javascript bên dưới nhé

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("mySearch");
    let inputRemoveAccents = removeAccents(input.value);
    filter = inputRemoveAccents.toUpperCase();
    ul = document.getElementById("myMenu");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        let target = removeAccents(a.innerHTML.toUpperCase());
        if (target.indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
function removeAccents(str) {
  return str.normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .replace(/đ/g, 'd').replace(/Đ/g, 'D');
}
</script>
Share
Jul 6th, 2022 9:07 a.m.

cám ơn bạn nhiều lắm, đúng cái mình cần đây rồi🙂

0
| Reply
Share
Avatar CongHD @conghdql4
Jul 6th, 2022 10:02 a.m.

@trainee Bạn chú ý trường hợp ví dụ như bạn search là CON BÒ thì kết quả là CON BỌ nó vẫn ra nhé.

0
| Reply
Share
Answered Jul 2nd, 2022 3:50 p.m.
+1

Một giải pháp đơn giản nhưng cực kỳ 🍌 là bạn có thể hardcode những từ tiếng việt để replace sang tiếng anh (áp dụng regex sẽ gọn hơn), vd:

Việt Anh
ù ú ụ ủ ũ ư ừ ứ ự ử ữ u
è é ẹ ẻ ẽ ê ề ế ệ ể ễ e
ò ó ọ ỏ õ ô ồ ố ộ ổ ỗ ơ ờ ớ ợ ở ỡ o
à á ạ ả ã â ầ ấ ậ ẩ ẫ ă ằ ắ ặ ẳ ẵ a
ì í ị ỉ ĩ i
function normalize(text) {
  return text.replace(/[ìíịỉĩ]/gi, 'i').replace(/[àáạảãâầấậẩẫăằắặẳẵ]/gi, 'a').replace().replace()...
}

a = li[i].getElementsByTagName("a")[0];
if (normalize(a.innerHTML).toUpperCase().indexOf(filter) > -1) { ... }

Còn để có giải pháp xịn xò, chỉn chu hơn chắc phải tìm hiểu sâu hơn về UTF encoding 🤷‍♂️

Share
Viblo
Let's register a Viblo Account to get more interesting posts.