Thêm văn bản tìm kiếm mặc định vào ô search với HTML và JavaScript

Placeholder vs Default Value trong ô tìm kiếm

Có 2 khái niệm dễ nhầm lẫn:

• Placeholder: Gợi ý mờ (màu xám), biến mất khi focus, không gửi lên server khi submit form.
• Default Value (value): Giá trị thực, hiển thị bình thường, gửi lên server khi submit.

Ví dụ: Placeholder (Khuyến nghị cho search box)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Placeholder</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        input[type="search"] { padding: 10px 15px; font-size: 16px; width: 300px; border: 1px solid #ddd; border-radius: 4px; }
        input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.2); }
    </style>
</head>
<body>
    <h1>Placeholder cho ô tìm kiếm</h1>
    <form>
        <input type="search" id="searchBox" placeholder="Tìm kiếm sản phẩm, bài viết..." />
        <button type="submit">Tìm</button>
    </form>
    <p style="margin-top: 20px; color: #666;">Placeholder màu xám, biến mất khi click, không gửi lên server.</p>
</body>
</html>

Ví dụ: Default Value với xóa tự động khi focus (cách cũ)

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default Search Text</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
        input[type="text"] { padding: 10px 15px; font-size: 16px; width: 300px; }
    </style>
</head>
<body>
    <h1>Default Value với auto-clear</h1>
    <input type="text" id="textSearch" />
    <p style="margin-top: 10px; color: #666;">Giá trị "John" sẽ xóa khi click, nhưng gửi lên server nếu không xóa.</p>

    <script>
        const defaultText = "John";
        const textBox = document.getElementById("textSearch");
        
        // Set giá trị mặc định
        textBox.value = defaultText;
        
        // Xóa khi focus nếu vẫn là giá trị mặc định
        textBox.onfocus = function() {
            if (this.value === defaultText) {
                this.value = '';
            }
        };
        
        // Khôi phục nếu bỏ trống khi blur
        textBox.onblur = function() {
            if (this.value === '') {
                this.value = defaultText;
            }
        };
    </script>
</body>
</html>

So sánh và khuyến nghị

Nâng cao: Search với gợi ý (Autocomplete)

<input type="search" id="search" placeholder="Tìm kiếm..." list="suggestions" />
<datalist id="suggestions">
    <option value="JavaScript">
    <option value="TypeScript">
    <option value="React">
    <option value="Vue">
    <option value="Node.js">
</datalist>