+1
làm thế nào để search được key word mà không cần dùng dấu tiếng viêt?
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>
2 CÂU TRẢ LỜI
+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>
cám ơn bạn nhiều lắm, đúng cái mình cần đây rồi🙂
+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 🤷♂️
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
👇