Hướng dẫn tạo placeholder chữ chạy cho khung tìm kiếm wordpress

Hướng dẫn tạo placeholder chữ chạy cho khung tìm kiếm wordpress

08/11/2022 - 22

Hướng dẫn tạo chữ chạy (placeholder) khung tìm kiếm (search) cho website đơn giản nhất, thích hợp để áp dụng cho các trang website bán hàng.

Các bạn có thể làm theo hướng dẫn bên dưới

Đầu tiên các bạn viết Script như sau đặt trước thẻ đóng </body> của template

jQuery("document").ready(function($){
    ! function(t) {
        "use strict";
        t.fn.placeholderTypewriter = function(e) {
            var n = t.extend({
                delay: 50,
                pause: 1e3,
                text: []
            }, e);

            function r(t, e) {
                t.attr("placeholder", ""),
                    function t(e, r, u, a) {
                        var i = n.text[r],
                            o = e.attr("placeholder");
                        if (e.attr("placeholder", o + i[u]), u < i.length - 1) return setTimeout(function() { t(e, r, u + 1, a) }, n.delay), !0; a() }(t, e, 0, function() { setTimeout(function() { ! function t(e, r) { var u = e.attr("placeholder"), a = u.length; if (e.attr("placeholder", u.substr(0, a - 1)), a > 1) return setTimeout(function() {
                                    t(e, r)
                                }, n.delay), !0;
                                r()
                            }(t, function() {
                                r(t, (e + 1) % n.text.length)
                            })
                        }, n.pause)
                    })
            }
            return this.each(function() {
                r(t(this), 0)
            })
        }
    }(jQuery);

    var placeholderText = ['bất động sản', 'mỹ phẩm', 'thời trang', 'nội thất', 'nhà hàng', 'thực phẩm', 'xây dựng', 'bán hàng'];
    $('.search-field').placeholderTypewriter({
        text: placeholderText
    });
  });

Trong đó search-field là “class” của khung search

Nếu là class $(‘.search-field‘), tương tự với id sẽ là $(‘#search-field‘)

Ví dụ thẻ input đang có class là search-field : <input type=”search” class=”search-field”>

Bạn có thể xem demo ở phần tìm kiếm trên trang themeflatsome.net

Chúc bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bài viết liên quan
Hướng dẫn kích hoạt ionCube Loader PHP Extension trong Cpanel

Hướng dẫn kích hoạt ionCube Loader PHP Extension trong Cpanel

- 24/11/2022

Trong 1 số plugin hoặc theme bắt buộc cần có ionCube để hoạt động. Vì vậy trong bài này mình sẽ hướng dẫn các bạn kích hoạt ionCube Loader Kích hoạt ionCube trong Cpanel Bước1: Chọn Select PHP Version Bước 2: Chọn iconcube_loader như hình. sau đó ấn Lưu thay đổi Xong cho cpanel rồi nhé cả nhà. Hãy vào web […]

Đọc thêm
Code tạo sidebar WordPress

Code tạo sidebar WordPress

- 18/11/2022

Cách tạo một widget có thể hơi phức tạp nhưng để tạo một sidebar thì không phức tạp như vậy, quy trình nó dễ hơn rất nhiều vì bạn chỉ cần viết vài đoạn code cơ bản. Chỉ cần hiểu rõ cấu trúc theme WordPress, bạn sẽ có thể chèn sidebar vào bất cứ đâu. […]

Đọc thêm
Tìm kiếm chính xác tiêu đề WordPress

Tìm kiếm chính xác tiêu đề WordPress

- 16/11/2022

[Thủ thuật WordPress] Hướng dẫn cách tìm kiếm chính xác tiêu đề hoặc nội dung trong WordPress – Nếu bạn thường xuyên sử dụng tính năng tìm kiếm của WordPress thì bạn sẽ sớm nhận ra rằng công cụ tìm kiếm của WordPress quá ư là “Cùi chuối” bởi lẽ khi bạn gõ một cụm từ […]
Đọc thêm
Code chèn Countdown Theme Flatsome

Code chèn Countdown Theme Flatsome

- 15/11/2022

Mặc định trong Theme Flatsome đã có sẵn chế độ Countdown, tuy nhiên rất ít người biết đến. Để hiển thị tính năng Countdown Theme Flatsome ( đếm ngược ) bạn chỉ cần sử dụng đoạn code dưới đây. Bạn chỉ cần chèn class “count-up” như ví dụ bên dưới: <span class=”count-up”>1996</span> Sau đó các […]

Đọc thêm
Contact Me on Zalo