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 - 166

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
Contact Me on Zalo