Asked thg 7 2, 8:45 SA 199 0 2
  • 199 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
  • 199 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
thg 7 2, 3:20 CH

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 thg 7 5, 1:50 SA
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
thg 7 6, 9:07 SA

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
thg 7 6, 10:02 SA

@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 thg 7 2, 3:50 CH
+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.