if (preg_match("/iPhone|iPad|Android|Windows Phone/is", $_SERVER['HTTP_USER_AGENT'])) {
$style = "position:relative";
} else {
$style = "width: 500px; margin: 36px 106px; position: relative;";
}
?>
<!-- Form Tìm kiếm -->
<form onsubmit="return redirectSearch()">
<div style="<?= $style ?>">
<input id="searchInput" type="text" placeholder=""
style="width: 100%; padding: 10px 40px 10px 15px; border-radius: 30px; border: 1px solid #ccc; outline: none; font-size: 16px; background: #fff;">
<button class="homesearch" type="submit" style="position: absolute; top: 55%; right: -7px; transform: translateY(-55%); background: none; border: none; cursor: pointer;">
<i class="fa fa-search"></i>
</button>
</div>
</form>
<script>
const placeholders = ["Nhập tên sản phẩm", "Tìm sản phẩm", "Tìm thuốc", "Tìm thực phẩm chức năng"];
let index = 0, charIndex = 0;
const input = document.getElementById('searchInput');
// Placeholder chạy chữ
function typePlaceholder() {
if (charIndex <= placeholders[index].length) {
input.placeholder = placeholders[index].substring(0, charIndex);
charIndex++;
setTimeout(typePlaceholder, 100);
} else {
setTimeout(() => {
index = (index + 1) % placeholders.length;
charIndex = 0;
typePlaceholder();
}, 2000);
}
}
// Chuyển hướng URL đẹp khi tìm kiếm
function redirectSearch() {
let keyword = input.value.trim();
if (keyword !== '') {
keyword = keyword.toLowerCase().replace(/\s+/g, '-');
keyword = encodeURIComponent(keyword);
window.location.href = "/tim-kiem/" + keyword;
}
return false;
}
typePlaceholder();
</script>
